When designing a website there may be times where you need to insert a graph or complex shapes into one of the pages. This can be a nightmare if you’re using standard HTML and even with JavaScript it can still be a pain to draw even simple shapes. Thankfully in HTML5 an easy way to draw graphics on the fly was added called canvas. Canvas is an HTML element with which you can draw all kinds of advanced shapes with ease using JavaScript.
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>
Be sure to give the element an ID so you can select it easily with JavaScript. I also recommend that you put a border around your canvas so you can easily see where it is on the web page.
Now that you’ve set up the canvas you can start drawing shapes with JavaScript. To start you need to first select your canvas element and convert it into a drawing object. This is done by having a variable equal to your canvas element and then using .getContext to convert it into a drawing object.
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.
Drawing Text
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.
cs.moveTo(0,0);
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.
cs.lineTo(300, 1100);
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.
cs.stroke();
The code used above will create a small circle but you can use arc to draw curved lines as well.
Final Thoughts
Canvas can be used to create graphs on pages and draw complex shapes for design. Also images drawn on the canvas can be animated with JavaScript so you could draw a circle and have it move around the web page like a bouncy ball. The canvas element opens up a whole new world of design for web pages.
Good Luck!
If you have any comments or questions email them to me at nick@crumbsofcode.com
