1. Définir un élément <canvas>.
2. Obtenir le canvas par ID.
3. Accéder au contexte 2d.
4. Dessiner des formes.

<canvas id="canvas" width="400" height="200">
    Canvas not supported.
</canvas>

window.onload = function () {
    var canvas = document.getElementById('canvas');
};

window.onload = function () {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
};

Il est important de respecter la casse de 2d et non inscrire 2D.

ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 100);