lineJoin : Shape of Join of lines on a Canvas
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
Triangular area formed by common endpoint and the outside endpoints are filled.
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();
This article is written by plus2net.com team.