Miterlimit and LineJoin Properties

<! DOCTYPE html> Window.onload=function () {
var canvas = document.getElementById (' canvas ');
Set high width, not recommended in CSS, because it will not be accurate
canvas.height=500;
canvas.width=800;
var context = Canvas.getcontext (' 2d ');

/*
LineJoin Properties: See Effects
context.linejoin= ' miter ';
context.linejoin= ' round ';
context.linejoin= ' bevel ';
*/
Context.linewidth = 20;
Context.beginpath ();
Context.moveto (10,20);
Context.lineto (10,400);
Context.lineto (90,20);
context.linecap= ' butt ';//default
context.linejoin= ' miter ';//default
Context.strokestyle= "Red";
Context.stroke ();

Context.beginpath ();
Context.moveto (120,20);
Context.lineto (120,400);
Context.lineto (200,20);
context.linejoin= ' round ';
Context.strokestyle= "Yellow";
Context.stroke ();

Context.beginpath ();
Context.moveto (220,20);
Context.lineto (220,400);
Context.lineto (320,20);
context.linejoin= ' bevel ';
Context.strokestyle= "Green";
Context.stroke ();

/*
Miterlimit property: The default value is 10,
The following method, because the angle between the line and the line is too small, context.linejoin= ' miter ' will fail
Workaround: context.miterlimit=20 or larger
*/
Context.beginpath ();
Context.moveto (340,20);
Context.lineto (340,400);
Context.lineto (400,20);
context.miterlimit=10; default value
context.miterlimit=20;//
context.linejoin= ' miter ';
Context.strokestyle= "Green";
Context.stroke ();
}
</script> </body>

Miterlimit and LineJoin Properties