HTML5 Canvas Reference - moveTo()

The moveTo() method moves drawing cursor to the specified point in the canvas.

Browser compatibility


`moveTo()`	Yes	Yes	Yes	Yes	Yes

JavaScript syntax

context.moveTo(x,y);

Parameter Values

Parameter	Description
x	The x-coordinate to move
y	The y-coordinate to move

Example

The following code uses the moveTo method to move the cursor.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();<!--from   w w w. j  a v  a 2 s  . co  m-->
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 150);
    ctx.stroke();

</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code uses moveTo and lineTo methods to create a shape and uses fill method to fill the shape.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(  0,   0);<!--from  www . j  a v  a2s  .  c o  m-->
    ctx.lineTo(200,   0);
    ctx.lineTo(200, 200);
    ctx.lineTo(  0, 200);
    ctx.lineTo(  0,   0);
    ctx.moveTo(300, 100);
    ctx.lineTo(300, 300);
    ctx.lineTo(100, 300);
    ctx.lineTo(100, 100);
    ctx.lineTo(300, 100);
    ctx.fill();

</script>

</body>
</html>

The code above is rendered as follows: