Here I’ll show you how to draw basic shapes with HTML5 Canvas.
I’m creating the canvas element in JS so no need to have it in HTML for the moment.
1 2 3 4 5 6 | var canvas = document.createElement('canvas'), w = canvas.width = 600, h = canvas.height = 400, c = canvas.getContext('2d');document.body.appendChild(canvas); |
Now the canvas variable keeps the instance of the canvas element. w and h keep the width and height of the canvas element. We can use them later to clear the whole canvas area.
c is the context of this canvas. This context gives us the methods and objects to draw on the canvas element.