How to draw basic shapes with HTML5 Canvas

By Cucu Ionel in Canvas, General, How To, javascript 0 Comment

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.

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.

Continue reading