HTML5 Game - Setting the lineCap property when drawing path

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Line Caps

Description

Setting the lineCap property when drawing path

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>Example</title>  
        <style>  
            canvas {border: thin solid black}  
            body > * {float:left;}  
        </style>  
    </head>  
    <body>  
        <canvas id="canvas" width="200" height="140">  
            Your browser doesn't support the <code>canvas</code> element  
        </canvas>  
        <script>  
            let ctx = document.getElementById("canvas").getContext("2d");  
              /* ww w  . j a  va2 s  .  c om*/
            ctx.strokeStyle = "red";  
            ctx.lineWidth = "2";  
            ctx.beginPath();  
            ctx.moveTo(0, 50);  
            ctx.lineTo(200, 50);  
            ctx.stroke();  
  
            ctx.strokeStyle = "black";  
            ctx.lineWidth = 40;  
  
            let xpos = 50;  
            let styles = ["butt", "round", "square"];  
            for (let i = 0; i < styles.length; i++) {  
                ctx.beginPath();  
                ctx.lineCap = styles[i];  
                ctx.moveTo(xpos, 50);  
                ctx.lineTo(xpos, 150);  
                ctx.stroke();  
                xpos += 50;  
            }  
        </script>  
    </body>  
</html>

The example draws a very thick line for each of the styles.

Related Topic