moveTo property
One very useful function, which doesn’t actually draw anything, but is part of the path list described above, is the moveTo function. You can probably best think of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the next.
moveTo(x, y);
The moveTo function takes two arguments, x and y, which are the coordinates of the new starting point.
When the canvas is initialized or the beginPath method is called, you typically will want to use the moveTo method to place the starting point somewhere else. We could also use the moveTo method to draw unconnected paths.
See the following example to draw a smiley face with moveTo function
Example
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas tutorial</title>
<script>
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
ctx.stroke();
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="200" height="200">
</canvas>
</body>
</html>
