Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
    <head>
        <title>A simple example of miterLimit property use</title>
    </head>
    <body>
        <canvas id="myCanvas" width="500">Your browser does not support the canvas tag.</canvas>
        <script>
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');
// first  path
            ctx.moveTo(20, 20);
            ctx.lineTo(100, 100);
            ctx.lineTo(100, 30);
// second part of the path
            ctx.moveTo(120, 20);
            ctx.lineTo(200, 100);
            ctx.lineTo(200, 30);
// indicate stroke color + draw first part of the path
            ctx.strokeStyle = "#0000FF";
// Current line thickness is 20 pixels   
            ctx.lineWidth = 20;
// Try different values : miter(default), bevel, round
            ctx.lineJoin = "miter";
// try to change this value, try 2, 3, 4, 5 et...
            ctx.miterLimit = 1;
            ctx.stroke();
// Draws a rectangle
            ctx.strokeRect(230, 10, 100, 100);
        </script>
    </body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
micbuffapro
0viewers