Canvas Draw Paths

Last Updated:

How to Draw a Path

Your browser does not support the canvas element.

To draw a path, follow these steps

  1. canvas - Assigning the canvas element to a variable.
  2. ctx - Assigning the 2d rendering context to another variable by calling the getContext('2d') method.
  3. beginPath() - Use beginPath() canvas method to start a new path by emptying the list of sub-paths.
  4. moveTo() - Use moveTo() canvas method to begin a new sub-path at the point specified by the given (x, y) coordinates.
  5. lineTo() - Use lineTo() canvas method to add a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
  6. closePath() - Use closePath() canvas method to add a straight line from the current point to the start of the current sub-path. If the shape has already been closed or has only one point, this function does nothing.
  7. stroke() - Use stroke() canvas method to stroke (outline) the current or given path with the current strokeStyle. The default strokeStyle is 'black'.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <canvas width="110" height="110" id="point"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById('point'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(5, 5); ctx.lineTo(5, 100); ctx.lineTo(105, 100); ctx.closePath(); ctx.stroke(); </script> </body> </html>

Share this Page

Meet the Author