canvas | Cucu Ionel

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.

Cucu Ionel

Tag Archives: canvas

How to draw basic shapes with HTML5 Canvas