The CanvasRenderingContext2D
.moveTo()
method of the Canvas 2D API begins a new sub-path at the point specified by the given (x, y)
coordinates.
Syntax
void ctx.moveTo(x, y);
Parameters
x
- The x-axis (horizontal) coordinate of the point.
y
- The y-axis (vertical) coordinate of the point.
Examples
Creating multiple sub-paths
This example uses moveTo()
to create two sub-paths within a single path. Both sub-paths are then rendered with a single stroke()
call.
HTML
<canvas id="canvas"></canvas>
JavaScript
The first line begins at (50, 50) and ends at (200, 50). The second line begins at (50, 90) and ends at (280, 120).
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 50); // Begin first sub-path ctx.lineTo(200, 50); ctx.moveTo(50, 90); // Begin second sub-path ctx.lineTo(280, 120); ctx.stroke();
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.moveTo' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
moveTo | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 11.6 | Safari Full support 2 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
See also
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.lineTo()
CanvasRenderingContext2D.stroke()