This post is the first in a series of blog posts where I explore the HTML5 canvas. This first tutorial looks at creating the basic elements required to draw on a canvas and drawing some basic shapes.
Creating and styling the canvas
The first step to creating an HTML5 canvas animation is adding the canvas to a page. This is achieved by adding a
canvas element to the page. This can be placed like any other block type HTML element and styled similarly.
border: dashed rgba(0, 0, 0, 0.4);
<canvas id="mainCanvas" width="500" height="500"></canvas>
Preparing to draw in the canvas
Now I have added the element to the page I can set up variables to access the canvas. Using the element ID above I can select the canvas with
document.getElementById. Using this element selector I then get the canvas 2d context by calling
getContext("2d") on the canvas element. This drawing context is the basis of drawing onto my canvas element.
var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
Now I have the 2d context I am able to use a number of methods on the context to draw basic shapes.
Drawing basic shapes
Now we have the 2d context I can start drawing some basic shapes. The most basic shape is drawing a line between two points.
Drawing a Line
The basis of drawing a line using the 2d context is selecting two points which will then have a line drawn between them. This will use the x, y coordinates in pixels.
lineTo functions you can create a line joining to points. First you tell the context that you are starting to draw a path with a call to
beginPath. Once this has been done you can either start drawing, or move the starting point. In this example I have used
moveTo to start drawing at the coordinates 20, 20.
To draw a line from the starting position you call
lineTo which sets the path to the coordinate given in the function.
Once the path has been created you can tell the context to draw the line by calling
stroke. This will create the line along the given path. In this example from the coordinate given in
moveTo to the coordinate given in
This basic example can be extended to make more complex paths by performing a series of calls to
lineTo or any other functions to create the path. Once a path has been created calling stoke will create a line following the given path.
Drawing a Rectangle
Similarly you can draw a rectangle using similar methods. First again we call
beginPath to initilize the path. Calling
rect on the context will create a rectangle path starting at the x and y positions 50, 75 with the width and height of 120, 140.
context.rect(50, 75, 120, 140);
context.fillStyle = "#FFCB1A";
Once the path has been created you can specify the fill style with the context property
fillStyle. Once you have defined the fillstyle
fill can be called to fill in the path.
context.lineWidth = 1;
context.strokeStyle = "black";
Instead of, or in addition to, filling the rectangle you could stroke it along the border. Above shows an example to define the colour and width of the border. This border is applied across the path as before so requires you to define the path using
Text can be drawn similarly to drawing a rectangle by using the
context.fillStyle = "black";
context.font = "20px Arial";
context.fillText("Hello World!", 25, 270);
font can be set using their respective properties of the context object. Once you have set the colour and font style
fillText can be called. This has three parameters, the text to enter, and the respective x and y position.
Drawing a Circle (or arc)
The final basic shape I will describe in this post is a circle. Again we start a path with
beginPath and then use the
arc command to create the path.
context.arc(300, 100, 50, 0, 2*Math.PI);
context.fillStyle = "#CBFF1A";
//Fill its outline
arc has some more properties than the standard drawing functions. The first two parameters are the coordinates of the center of the arc. The third parameter defines the radius of the arc and the final two parameters define the starting and stopping position of the arc. This is defined in radians so to draw a circle you set these to 0 and 2 * Pi.
Again like the above functions once you have defined your path you can fill and stroke it as required.
HTML5 Canvas drawing Conclusion
With these simple methods you can create complex shapes using the 2d context. In the next blog post I will talk about animating your canvas.
The example including the source code is available on my website.