Méthode : CanvasRenderingContext2D.moveTo()

Déplace le crayon au point x, y du canvas

Syntaxe
myContext.moveTo(x, y);

Compatible tous navigateurs

Oui

Description
Déplace le crayon aux coordonnées (x, y) du canvas.
Le canvas a comme point (0, 0) le coin supérieur gauche.

Exemple 1 : Représentation des axes de coordonnées dans le canvas

Code source

<canvas id="myCanvas" style="padding:10px; background-color:#fff;" width="500" height="200">Balise non reconnue</canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var ctx=myCanvas.getContext("2d");

/* Crée l'axe X */
ctx.lineStyle="1";
ctx.beginPath();
ctx.moveTo(5,5);
ctx.lineTo(500,5);
ctx.lineTo(495,10);
ctx.moveTo(500,5);
ctx.lineTo(495,0);
ctx.closePath();
ctx.stroke();

/* Crée l'axe Y */
ctx.beginPath();
ctx.moveTo(5,5);
ctx.lineTo(5,200);
ctx.lineTo(0,195);
ctx.moveTo(5,200);
ctx.lineTo(10,195);
ctx.closePath();
ctx.stroke();

/* Affiche les libellés des axes */
ctx.font="14px arial";
ctx.fillText("(x=0, y=0)",9,20);
ctx.fillText("x",490,25);
ctx.fillText("y",12,195);
</script>

Résultat

Emulation de la console

Explication

Dessine les axes de coordonnées dans le canvas.
Le point (0,0) est en haut à gauche

Page en rapport
Le tutoriel sur le dessin avec canvas

Page mise à jour le 21/09/2017