The CanvasRenderingContext2D.moveTo()
method of the Canvas 2D API begins a new sub-path at the point specified by the given (x, y)
coordinates.
The CanvasRenderingContext2D.moveTo()
method of the Canvas 2D API begins a new sub-path at the point specified by the given (x, y)
coordinates.
js
moveTo(x, y)
None (undefined
).
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>
The first line begins at (50, 50) and ends at (200, 50). The second line begins at (50, 90) and ends at (280, 120).
js
const canvas = document.getElementById("canvas"); const 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();
Specification |
---|
HTML Standard # dom-context-2d-moveto-dev |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
moveTo |
1 | 12 | 1.5 | 9 | 11.6 | 2 | 4.4 | 18 | 4 | 12 | 1 | 1.0 |
CanvasRenderingContext2D
CanvasRenderingContext2D.lineTo()
CanvasRenderingContext2D.stroke()
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo