Getting Started: 2D Canvas Application
An Intro to 2d Canvas
Setting up our Canvas
We start out by creating a Canvas element within our Web Page
HTML:
<canvas id="myCanvas">
Your Browser does not support HTML5 Canvas
</canvas>Note: The text between Canvas’ open and closing tags is only rendered if the HTML5 Canvas is not supported. This is something we get for free so please don’t overthink it.
Now we setup our variables in our code so that we can reach out to the Canvas and manipulate it.
JavaScript:
// get the Canvas Element
let canvas = document.getElementById("myCanvas");// retrieve the rendering context
let ctx = canvas.getContext("2d");
For those new to Canvas this is probably the oddest thing in the world. For most everything else in the DOM you can find the methods that correspond to manipulating that element upon that element. This is a little different with Canvas. Why?
Under the Hood
About a decade ago my best friend was driving around a Black 1996 Buick LeSabre with a giant Danzig skull on the front.
The 1996 Buick LeSabre and all GM cars built at the time came with two keys. A round key to open the doors, and a square key for the ignition. I know, I know. It probably sounds nuts to some of the younger folks, but the system worked well and had its advantages. Digressing to the point, Canvas’ two step setup works the same way.
// Open the Door
// Grab the Canvas element
let canvas = document.getElementById("myCanvas");// Put the key in the Ignition
// Get the rendering context object
let ctx = canvas.getContext("2d");
You’ll notice that the variablectx (context) is a reference to the getContext method call on the Canvas element and it passes in the string “2d” as a parameter.
If that sounds confusing and verbose, that’s okay! Let’s break it down further and show an example of what’s happening behind the scenes:
// demonstration of the canvas.getContext function.function getContext(param) {// the getContext function takes a parameter value
// then, based on the parameter passed in,
// it can return either a 2d or 3d(webgl) environment
// these environments have their own methods
// those methods are stored on 2d and 3d Objects
// those Objects are returned from this functionconst _2D_OBJECT = {
//... 2d Methods
}const _3D_OBJECT = {
//... 3d Methods
}if (param === "2d") {
return _2D_OBJECT;
}
else if (param === "webgl") {
return _3D_OBJECT;
}
}let ctx = getContext('2d');
//Places the 2d object into ctx.
Keep in mind that the above is an example of what the canvas.getContext function looks like. It is not a verbatim representation.
We can’t see the actual code because it is native to the Browser and hidden from view. In addition, the real getContext function takes an additional Object parameter that I will not be delving into for the duration of this article. If you would like you can certainly look at the MDN Article.
To recap, what happens is this:
- We grab the Canvas Element
- We get the Context Object by calling a method on the Canvas Element.
- Based on the context name we pass as a parameter, the method returns a specific Object.
Starting The Engine
If grabbing the Canvas element and its Context are opening the door and putting the key in the ignition, requestAnimationFrame can be considered starting the engine.
An Example:
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');//create a function called draw
function draw() { //when the next frame becomes available
//recursively call the draw function
requestAnimationFrame(draw);
}
//when the next Frame becomes available
//call the draw function
requestAnimationFrame(draw);
This may be a little confusing if you have never seen it before. I have tried to comment it to make it a little easier to understand, but I will admit a bit of frustration with this concept initially as well, so I will try to explain this a different way.
The function above is, simply put, a function being invoked(draw) that proceeds to call itself over and over. It could be rewritten as this:
function draw() { draw();
}
draw();
This is what’s known as Recursion. I’ve written more about this previously here.
Recursion in JavaScript is, simply put, the ability to call a function from within itself.
So if the above two snippets are fundamentally the same, what do we get out of using requestAnimationFrame that we don’t get out of a plain recursive function call?
The answer is in the name. Whatever function you pass the requestAnimationFrame method it will send a request to the Browser — “Can you process this?” and if the Browser is free to do so, it will. The MDN illustrates this in its own definition:
The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
This will call the function only once, so to continuously ask the browser “Can you process this?” we use recursion to continuously call our function using requestAnimationFrame. The MDN explains this as well:
You should call this method whenever you’re ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint. The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation. The callback rate may be reduced to a lower rate when running in background tabs or in hidden
<iframe>s in order to improve performance and battery life.
It is important to note, as specified above, that using requestAnimationFrame will typically pause a Canvas Application when it is not the currently selected Tab in modern browsers.
To illustrate this let’s go through a quick example. Keep in mind, we will go over the fillRect() method in the next section. What you should focus on is the architecture.
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
var rectX;
//create a function called draw
function draw() {
//begin drawing
if(!rectX) { rectX = 10; }
else { rectX += 1; }
context.clearRect(0,0,canvas.width, canvas.height);
context.fillRect(rectX, 0, 30, 30);
//end drawing
//when the next frame becomes available
//recursively call the draw function
requestAnimationFrame(draw);
}
//if the x coordinate of the rectangle
//is less than 270...
//when the next Frame becomes available
//call the draw function
if(rectX < 270) requestAnimationFrame(draw);Shapes, Paths, and Colors
The Canvas 2d Context has a number of methods built in to assist with the creation of images. Since this is an introduction, and a quick one at that, we will only go through a few of the most basic shapes and the different methods to draw them.
Our first shape, the Rectangle:
Example 1 —
//all of the rectangle creation methods
//take the parameters ( x, y, width, height )//create a rectangle with an outline
context.strokeRect(0, 0, 30, 30);
Example 2 —
//create a rectangle with an outline
context.strokeRect(0, 0, 30, 30);//create a rectangle that is filled
context.fillRect(30, 30, 30, 30);
Example 3 —
//create a rectangle with an outline
context.strokeRect(0, 0, 30, 30);//create a rectangle that is filled
context.fillRect(30, 30, 30, 30);//create a drawing path
context.beginPath();
//add a rectangle to the path
context.rect(60, 60, 30, 30);
//close the drawing path
context.closePath();//stroke the path(which in this case is our rectangle)
context.stroke();
Example 4 —
//create a rectangle with an outline
context.strokeRect(0, 0, 30, 30);//create a rectangle that is filled
context.fillRect(30, 30, 30, 30);//create a drawing path
context.beginPath();
//add a rectangle to the path
context.rect(60, 60, 30, 30);
//close the drawing path
context.closePath();//stroke the path(which in this case is our rectangle)
context.stroke();//create a drawing path
context.beginPath();
//add a rectangle to the path
context.rect(90, 90, 30, 30);
//close the drawing path
context.closePath();//fill the path(which in this case is our rectangle)
context.fill();
Paths
In the above code you’ll notice the last two rectangles are drawn using “Paths”. If you haven’t heard that term before it may be a little confusing. Within Canvas and other drawing applications, a Path is a set of instructions that is collected together and then rendered all at once to a view. Basically, we can declare several shapes(and lines)and then draw them all at the same time. This is the basic principle that will allow you to draw complex shapes.
Knowing this, the above example of diagonal cubes could be refactored into two paths(one for outlined boxes, and one for filled):
//drawing path
//for filled cubes
ctx.beginPath();
//3rd cube
ctx.rect(60, 60, 30, 30);
//1st cube
ctx.rect(0,0,30,30);
ctx.closePath();
ctx.fill();//drawing path
//for outlined cubes
ctx.beginPath();
//2nd cube
ctx.rect(30, 30, 30, 30);
//4th cube
ctx.rect(90, 90, 30, 30);
ctx.closePath();
ctx.stroke();
Fill and Stroke
The context has two methods that we use frequently. They are the following:
context.fill();context.stroke();
These two methods are used to draw the preceding path. The context.fill method will fill in the preceding path with a color. The context.stroke method will outline the preceding path with a color. As seen in the examples above, the default color is black. Let’s quickly go over how to change that!
Colors
Colors are an important part of an image, wouldn’t you say? So far we‘ve been drawing to the screen with the default color, black, but that’s pretty boring. Fortunately, it’s quite easy to change this. Unfortunately(as with a few things in Canvas) the wording isn’t quite that intuitive. You may think that the properties to adjust the coloring would be named something likestrokeColor and fillColor but, in fact, the properties we need to adjust arestrokeStyle and fillStyle.
An Example:
//set colors for top half
ctx.strokeStyle = "blue";
ctx.fillStyle = "green";
//draw top half
ctx.strokeRect(0, 0, 50, 50);
ctx.fillRect(50, 50, 50, 50);
ctx.strokeRect(100, 0, 50, 50);
ctx.fillRect(150, 50, 50, 50);
ctx.strokeRect(200, 0, 50, 50);//set colors for bottom half
ctx.strokeStyle = "red";
ctx.fillStyle = "turquoise";
//draw bottom half
ctx.strokeRect(0, 100, 50, 50);
ctx.fillRect(50, 150, 50, 50);
ctx.strokeRect(100, 100, 50, 50);//set color of last two squares
ctx.fillStyle = "rgb(0,0,0)";
ctx.strokeStyle = "#FF00ac";
//draw last two squares
ctx.fillRect(150, 150, 50, 50);
ctx.strokeRect(200, 100, 50, 50);
In the above example you can see us use fillStyle and strokeStyle to render different colors to the screen. You will also notice that we used several different formats for setting the color property including:
- RGB:
rgb(0,0,0) - Hex:
#000or#FF0000 - Safe Web Colors(HTML colors):
blue,green,etc...
Additionally these other formats will also work:
- RGBA:
rgba(0,0,0,.3) - HSL:
hsl(120,100%,50%) - HSLA:
hsl(120,100%,50%,.3)
Circles
The second most commonly used shape is probably a circle. It is a bit more complicated than a rectangle because instead of simply saying “Hey you, Canvas, draw a circle!” we have to tell our Canvas exactly how to do that with a few more parameters.
To create a circle we create an arc. The arc method looks like this:
context.arc(
x, y, radius, start angle, end angle, counterclockwise/clockwise
)counterclockwise/clockwise is an optional Boolean (true or false) parameter and if it isn't explicitly declared it is considered false.
Example 1 —
context.arc(
100, //x
100, //y
30, //radius
0, //start angle
2*Math.PI // end angle
);//fill shape
context.fill();
There are two important concepts when it comes to arcs. The first is that with this statement:
//parameters(x, y, radius, start angle, end angle)
context.arc(0, 0, 30, 0, 2*Math.PI);the X and Y parameters are the center point of the arc. That means the above code renders the circle around the point 0,0 and we’re left with three quarters of our circle outside of the Canvas view.
It’s important to remember this when positioning elements using arc Once you start building your own HTML5 Canvas Apps it can lead to quite a few headaches if you forget that the x and y coordinates are in relation to a center point.
The second important concept is that of the parameters Start Angle and End Angle. Keep in mind, it is important, but it is also entirely possible to build cool HTML5 Applications without knowing anything other than how to make a circle. The concepts involved are a little trickier, however, so I moved the examples and explanations off into another post. I recommend taking a look of course, but it isn’t necessary. You can find that article here:
Simple Drawing
It is important to be able to draw millions of different shapes. Unfortunately that means there are far too many to simply add as methods to the canvas context. There may come a time when you need more than just simple rectangles and arcs, and when that time arrives you’re going to need to know how to create your own paths.
Path Methods
If you’ve been following along you will have seen Paths mentioned several times. To reiterate:
a Path is a set of instructions that is collected together and then rendered all at once to a view
The basic methods of drawing Paths are fairly straight-forward:
ctx.beginPath(); // start a new pathctx.moveTo(x, y); // move positionctx.lineTo(x, y); // draw line to and move to position.ctx.closePath(); // end of instructions
// close path will try to "close"
// the shape if it's open
beginPathand closePath are self-explanatory. As stated above though, it is important to know that closePath will try to close a shape if it’s open. In the following example we have 2/3’s of a triangle drawn:
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');context.beginPath();
context.moveTo(30, 30);
context.lineTo(70, 70);
context.lineTo(30, 70);
context.stroke();
If we want to close the shape we could draw a line connecting the last two points, however, we could simply call closePath as a much simpler solution.
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');context.beginPath();
context.moveTo(30, 30);
context.lineTo(70, 70);
context.lineTo(30, 70);
context.closePath();
context.stroke();
The other two methods are moveTo and lineTo. You can think of these methods as though you are a Professional drawing on an actual Canvas.
The image above is synonymous with moveTo because the artist is moving the position of the pencil without touching the canvas. They are simply moving their hand in order to draw the next line.
lineTo in much more obvious fashion, looks like this:
moveTo and lineTo example:
There are other, more advanced methods, of course. These include:
context.arcTo(x1, y1, x2, y2, radius);context.bezierCurveTo(control point x, control point y,
control point x2, control point y2,
x, y);context.quadraticCurveTo(control point x, control point y,
x, y);
It is good to know these exist, but these are a little more complex so we won’t be going into these today. If you would like more information you can find it at the MDN Canvas Context site.
Rendering Font
One subject that we haven’t gone over is that of rendering text inside of a Canvas Application.
We do so using the following methods:
context.font = "font style and family";context.fillText(text, x, y);context.strokeText(text, x, y);
fillText and strokeText either fill the text with color, or outline the text with color. These are very similar to the fill and stroke methods we’ve covered previously, so it shouldn’t be any surprise.
font is a String Property. The string that is set determines the font output for the fillText and strokeText methods. The string must be formatted in the following order:
context.font= ”font-style font-variant font-weight font-size font-family”;
However the only required fields are font-size and font-family. The following strings are valid:
context.font = "30px Arial";
context.font = "bold 30px Courier";Order is still important. The following strings are invalid:
context.font = "Arial 30px";
context.font = "30px bold Courier";A working demo:
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');context.font = "40px Arial";
context.fillText("Fill Text", 30, 50);
context.strokeText("Stroke Text", 10, 100);
For more information on the different parameters allowed in the font property, please look over this article at w3 Schools
There are a lot more things that we could get into regarding HTML5 Canvas, but I think at this point it is safe to say that you should have a grasp of the basics which is what we are going for here.
I will be releasing articles in the future regarding Canvas DPI, Caching, and several other one-off topics, and I’ll be certain to update this article when those are completed.
Please see the resources below with any questions!
