Exercice

Appliquer les fonctions de l'API Canvas. Soit un canvas de taille (200,200).

Dessiner un carré en partant du milieu du canvas de taille (50,50).

Question

Au lieu de dessiner un carré avec "ctx.rect(100,100,50,50)", dessiner un carré en utilisant les fonctions moveTo(x,y) et lineTo(x,y).

Indice

Rappel : code de base

1
<canvas id="mon_canvas" width="200" height="200" />
2
<script type="text/javascript">
3
var c = document.getElementById("mon_canvas");
4
var ctx = c.getContext('2d');
5
// On effectue ici toutes les opérations de dessin
6
</script>

Question

Colorier le carré en rouge.

Indice

ctx.fillStyle

ctx.fill()