• W3Schools HTML5 Canvas

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);

• clearRect(x, y, width, height)
• fillRect(x, y, width, height)
• rect(x, y, width, height)
• strokeRect(x, y, width, height)

• fillStyle
• strokeStyle

• arc(x, y, radius, startAngle, endAngle, antiClockwise)
• arcTo(x1, y1, x2, y2, radius)

• fillStyle
• strokeStyle