Drawing a Simple Shape
Before getting started you need to insert a canvas element somewhere within the body element of your web page. The element is not self closing so requires an end tag. Use the element’s width and height attributes instead of normal CSS for resizing. The reason for this is that if you use CSS any drawings on the canvas will appear cut off and extremely low quality.
<!DOCTYPE html> <html> <body> <canvas id="Canvas" width="1200" height="1200" style="border:1px #000 solid"> </canvas> </body> </html>
var canvas = document.getElementById("Canvas"); var cs = canvas.getContext("2d");
Next you need to set the fill style of your drawing object using the .fillstyle method. This method controls the colour, gradient and pattern of shapes made with your drawing object. For now we’re just going to create a rectangle which can easily be done using either .rect() or .fillrect(). The difference between the two methods is that .rect() draws an outline of a rectangle and .fillrect() draws a solid rectangle. Both take the same four arguments which are: x coordinate of top left corner of the rectangle, y coordinate of the top left corner, width and height.
cs.fillStyle = "#9932CC"; cs.fillRect(50,40, 500, 300);
After you’ve done all that your web page should contain a basic rectangle that meets the parameters that you set for it.
The canvas element can also be used to create text. First use the .font method to set the CSS font properties for the text you want to draw.
cs.font = “50px Times New Roman”;
Then use either strokeText() or fillText() to actually draw your text. The strokeText method will draw the text as just an outline and the fillText method will draw solid text. Both methods take the following three arguments: text to draw, x coordinate of the top left corner and y coordinate of the top left corner. The colour of the text is black by default but can be changed with fillStyle.
cs.fillStyle = "#000000"; cs.fillText("Hello World!", 100, 200);
This will draw in the text “Hello World” on the web page coloured in black.
Drawing Lines and Arcs
To draw a simple straight line on a canvas you need to first define the starting point of the line using the moveTo method. This takes two arguments, the starting x coordinate of the line and the starting y coordinate of the line.
Next you need to define the endpoint of the line using the lineTo method. This method takes two arguments, the ending x coordinate of the line and the ending y coordinate of the line.
Of course you aren’t just limited to straight lines on the canvas, you can draw curved lines and circles as well. To initiate drawing a circle you need to first use the .beginPath() method. Then use the .arc method to define the parameters of your curved line or circle. This method takes five arguments: the x coordinate of the centre of the arc, the y coordinate of the centre, the radius, the start angle, and the end angle.
cs.beginPath(); cs.arc(95,50,40,10, 40);
Just like with drawing a straight line you need to initialize the drawing of an arc by using the .stroke method.
The code used above will create a small circle but you can use arc to draw curved lines as well.
If you have any comments or questions email them to me at firstname.lastname@example.org