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




Beginpath method in html5 canvas

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

  • The beginPath() method is one of the canvas method.
  • The beginPath() method is used to begins a path, or resets the current path.

Syntax for beginPath() Method in HTML5 Canvas:

context.beginPath();

Sample Coding for beginPath() Method in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
      <title>wikitechy -HTML Canvas beginpath</title>
    </head>
    <body>
        <h2>wikitechy HTML Canvas beginpath with example  </h2>
        <canvas id="wikitechyCanvas" width="400" height="200" 
        style="border:1px solid #d3d3d3;">
        </canvas>
        <script>
            var m = document.getElementById("wikitechyCanvas");
            var mak = m.getContext("2d");
            mak.beginPath();
            mak.lineWidth = "10";
            mak.strokeStyle = "red";  
            mak.moveTo(50, 80);
            mak.lineTo(300, 85);
            mak.stroke();  

            mak.beginPath();
            mak.strokeStyle = "black";  
            mak.moveTo(55, 25);
            mak.lineTo(300, 140);
            mak.stroke();  

        </script>
    </body>
</html>

Code Explanation for beginPath() Method in HTML5 Canvas:

beginPath() method in HTML5 canvas Code Explanation

  1. ”wikitechyCanvas” is used to define the id attribute value for canvas element.
  2. The getElementById(); method is used to get the element that has the id attributes value as “wikitechyCanvas”.
  3. m.getContext(“2d”) is used to draw a two-dimensional figure on a canvas.
  4. beginpath() method is used to begins the path for a line.
  5. mak.lineWidth is used to set a line width as 10.
  6. strokeStyle is used to set the red color for first line.
  7. The moveTo() method is used to set the starting point at (50,80) in x,y direction.
  8. The lineTo() method is used to set the ending point at (300,85) in x,y direction.
  9. stroke()is used to draw the actual path.
  10. strokeStyle is used to set the black color for second line.

Output for beginPath() Method in HTML5 Canvas:

beginPath() method in HTML5 canvas Output

  1. The canvas rectangle with 400 width and 200 height.
  2. Here the output will be displays red color path.
  3. The second line start with black color path.

Browser Support for beginPath() Method in HTML5 Canvas:

Yes Yes Yes Yes Yes

Tips and Notes


Related Searches to beginPath() Method in HTML5

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×