Windows apps
Collapse the table of content
Expand the table of content
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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:
© 2016 Microsoft