lineJoin : Shape of Join of lines on a Canvas



Select the radio button to change the lineJoin value.
gctx.lineJoin='miter|bevel|round';
miter
Linejoin value miter
Lozenge-shape is created by extending outside edges of lines. In above demo increase the width of the line and see how extended edge is increasing. The extension can be limited by using miterLimit setting
bevel
Linejoin value bevel
Triangular area formed by common endpoint and the outside endpoints are filled.
round
Linejoin value round
Rounded corner is formed by adding sector of disk. The radius of this sector is equal to line width
var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
gctx.beginPath()
gctx.moveTo(100,280);
gctx.lineTo(180,80);
gctx.lineTo(260,280);
gctx.strokeStyle= '#008cf5';
gctx.lineWidth = width;
gctx.lineJoin = 'round';
gctx.stroke();

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    Post your comments , suggestion , error , requirements etc here .




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer