html tutorial - closePath() Method in HTML5 Canvas - html5 - html code - html form




Closepath method in html5 canvas

Learn html - html tutorial - Closepath method in html5 canvas - html examples - html programs

  • The closePath is a property of <canvas> element in Paths.
  • The closePath() method designs a path from the present point back to the starting point.

Syntax for closePath() Method in HTML5 Canvas:

context.closePath();

Sample Coding for closePath() Method in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>wikitechy - HTML Canvas closePath Method</title>
    </head>
    <body>
        <h1>wikitechy HTML Canvas closePath Method</h1>
        <canvas id="wikitechyCanvas" width="200" height="200"        
          style="border:2px solid red;">
        </canvas>
        <script>
            var cp= document.getElementById("wikitechyCanvas");
            var cpx= cp.getContext("2d");
            cpx.beginPath();
            cpx.moveTo(30, 10);
            cpx.lineTo(150, 75);
            cpx.lineTo(15, 100);
            cpx.closePath();
            cpx.stroke();
        </script>
    </body>
</html>

Code Explanation for closePath() Method in HTML5 Canvas:

closePath() Method in HTML5 canvas Code Explanation

  1. ”wikitechyCanvas” is used to define the value id attribute for canvas element.
  2. The getElementById() method is used to get the canvas element that has the id attributes with the specified value.
  3. cp.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas.
  4. cpx.beginpath() method is used to begins the path or reset the current path to increase width of the line using linewidth .
  5. cpx.moveTo() method is used to set the starting point at (30,10)in x ,y axis.
  6. cpx.lineTo() method is used to set the ending point at (150,75) in x, y direction.
  7. cpx.lineTo() method is used to set the ending point to starting point at (15,100) in x, y direction.
  8. cpx.closePath() creates a path from the current point back to the starting point.
  9. cpx.stroke() method is used to display the graphics.

Output for closePath() Method in HTML5 Canvas:

closePath() Method in HTML5 canvas Output

  1. The canvas rectangle with red color border.
  2. Draw a path and then draw a line back to the starting point.

Browser Support for closePath() Method in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Related Searches to closePath() Method in HTML5 Canvas