HTML5 Game - Canvas Line Join

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

Setting the Line Join Style

The lineJoin property determines how lines that join one another are drawn.

There are three values:

  • round
  • bevel
  • miter.

The default value is miter.

The following code shows the three styles in use.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black; margin: 4px}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="140">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <script>
            let ctx = document.getElementById("canvas").getContext("2d");
            ctx.lineWidth = 20;// ww  w.  j  a va2 s.  co  m
            
            ctx.lineJoin = "round";
            ctx.strokeRect(20, 20, 100, 100);

            ctx.lineJoin = "bevel";
            ctx.strokeRect(160, 20, 100, 100);
            
            ctx.lineJoin = "miter";
            ctx.strokeRect(300, 20, 100, 100);
        </script>
    </body>
</html>

In the example above, I have used the lineWidth property so that the strokeRect method will draw rectangles with very thick lines.

Related Topics