The CanvasRenderingContext2D
.moveTo()
method of the Canvas 2D API moves the starting point of a new sub-path to the (x, y)
coordinates.
Syntax
void ctx.moveTo(x, y);
Parameters
x
- The x axis of the point.
y
- The y axis of the point.
Examples
Using the moveTo
method
This is just a simple code snippet which uses the moveTo
method to move the pen to a start position for drawing a line.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.stroke();
Edit the code below and see your changes update live in the canvas:
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.moveTo' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
See also
- The interface defining it,
CanvasRenderingContext2D
CanvasRenderingContext2D.lineTo()
CanvasRenderingContext2D.stroke()