html tutorial - lineCap Property in HTML5 Canvas - html5 - html code - html form



Linecap property in html5 canvas

Learn html - html tutorial - Linecap property in html5 canvas - html examples - html programs

  • The lineCap is a property of <canvas> element in line style.
  • The lineCap property returns the style of the end caps for every line

Syntax for lineCap Property in HTML5 Canvas:

context.lineCap="square";

Property values for lineCap Property in HTML5 Canvas:

Value Description
butt The ends of lines are flat edge. It is a default value in lineCap.
round The ends of lines are rounded.
square The end of line are squared box.

Sample Coding for lineCap Property in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy HTML Canvas lineCap Property with example</title>
    </head>
    <body>
        <h1>Wikitechy HTML Canvas lineCap Property with example</h1>
        <h3>The three different line caps:</h3>
        <canvas id="wikitechyCanvas" width="400" height="200"  
               style="border:1px solid green;">
        </canvas>
        <script>
              var lc = document.getElementById("wikitechyCanvas");
              var lcx = lc.getContext("2d");
              lcx.beginPath();
              lcx.lineWidth = 15;
              lcx.lineCap = "butt";
              lcx.moveTo(100, 40);
              lcx.lineTo(300, 40);
              lcx.stroke();
              
              lcx.beginPath();
              lcx.lineCap = "round";
              lcx.moveTo(100, 80);
              lcx.lineTo(300, 80);
              lcx.stroke();
              
              lcx.beginPath();
              lcx.lineCap = "square";
              lcx.moveTo(100, 120);
              lcx.lineTo(300, 120);
              lcx.stroke();
        </script>
    </body>
</html>

Code Explanation for lineCap Property in HTML5 Canvas:

lineCap Property in HTML5 canvas Code Explanation

  1. ”wikitechyCanvas” is used to define the value of id attribute for canvas element.
  2. The getElementById() method is used to get the element that has the id attribute with the “wikiCanvas” value.
  3. lc.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas.
  4. beginPath() method is used to begins the path or reset the current path to increase width of the line using linewidth .
  5. lcx.lineWidth=15 is used to draw a line with a width of 15 pixel.
  6. lcx.lineCap=”butt” is set to use the butt option. The flat edge is added to each end of the line. This is default value.
  7. lcx.moveTo() method is used to set the starting point at (100,40)in x ,y axis.
  8. lcx.lineTo() method is used to set the ending point at(300,40) in x, y direction.
  9. The lcx.stroke() method is used to display the graphics.
  10. lcx.lineCap=”round” is set to use the round option. The semicircle is added to each end of the line.
  11. lcx.lineCap=”square” is set to use the square option. The square box is added to each end of the line.

Output for lineCap Property in HTML5 Canvas:

lineCap Property in HTML5 canvas Output

  1. The canvas rectangle with green color border.
  2. The flat edge is added to corners of the line.
  3. The semicircle is added to corners of the line.
  4. The square box is added to corners of the line.

Browser Support for lineCap Property in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Tips and Notes

  • The context.lineCap=”round|squared” values make the line slightly longer than the context.lineCap=”butt” make the line.

Related Searches to lineCap Property in HTML5 Canvas