moveTo method

Creates a new subpath by using the specified point.

HTML Canvas 2D Context, Section 9Internet Explorer 9

Syntax

CanvasRenderingContext2D.moveTo(x, y);

Parameters

x [in]

Type: number

The x-coordinate, in pixels.

y [in]

Type: number

The y-coordinate, in pixels.

Return value

This method does not return a value.

Standards information

Remarks

This method is often used to set a point without drawing a line, such as a starting point for a shape.

Examples

The following code example uses the moveTo and lineTo methods to incrementally draw horizontal lines across the canvas.


<!DOCTYPE html> 
<html>
<head>
    <title>Moveto example</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              for (i = 10; i < 500; i += 20) {
                  ctx.moveTo(0, i);
                  ctx.lineTo(canvas.width, i);
                  ctx.stroke();
              }
          }
      }
  </script>
</head>
<body onload="draw()">
  <canvas id="MyCanvas" width="600" height="600">This browser or document mode doesn't support canvas</canvas> 
</body>
</html>


See also

CanvasRenderingContext2D
lineTo

 

 

Show:
© 2014 Microsoft