CanvasRenderingContext2D.moveTo()

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
moveToChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support 11.6Safari Full support 2WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 12Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

See also