In this Html5 canvas tutorial we will discuss how to set lineJoin attributes of Html5 canvas line. Html5 Canvas lineJoin attributes and How to set lineJoin attributes using html5 Canvas will be presented here in this htm5 tutortial. Lets start with lineJoin Introduction. When two lines meets a corner is created.This meeting of two line in canvs is called lineJoin.
miterbevelround
the code for the lineJoin is given
context.lineJoin =type-of-lineJoin;
——————————————–
shape of lineJoin
——————————————
1. miter
This is the default type of lineJoin in canvas.An edge is drawn at the join.
The maximum allowed ratio of miter length to line width is called miterLimit.
Its default value is 10.
The code to set lineJoin miter is
context.lineJoin="miter";
The shape of miter is given
————————–
——————————-
2. bevel
2. bevel
The second type of lineJoin is bevel.In bevel a diagonal is drawn
at the join.The code to set lineJoin bevel is given following.
context.lineJoin ="bevel";
The shape of bevel lineJoin is given under.
———————–
bevel shape
————————–
3. round
The third type of line join is called round.
In this join a round edge is drawn at the join.
The code for the round lineJoin is given.
context.lineJoin ="round";
——————————————–
round shape
——————————————-
html5 Canvas lineJoin attributes complete code example
——————————————–
<html>
<head>
<title>The type of lineJoin.</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="200"
style="border: 1px solid black">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.strokeStyle = "black";
context.lineWidth = 30;
// bevel lineJoin
context.lineJoin = 'bevel';
context.beginPath();
context.moveTo(100,30);
context.lineTo(200,30);
context.lineTo(200,100);
context.stroke();
context.closePath();
// round lineJoin
context.lineJoin = 'round';
context.beginPath();
context.moveTo(100,150);
context.lineTo(200,150);
context.lineTo(200,220);
context.stroke();
context.closePath();
// miter lineJoin
context.beginPath();
context.lineJoin = 'miter';
context.moveTo(100,270);
context.lineTo(200,270);
context.lineTo(200,340);
context.stroke();
context.closePath();
</script>
</body>
</html>
=============================================
HTML5 lineJoin attributes of html5 canvasline
=============================================
——————————————–
Live Demo lineJoin attributes of html5 canvas line
——————————————-
[codepen_embed height=500 theme_id=1 slug_hash=’ZYyoaG’ user=’aslamwaqar’ default_tab=’html’
animations=’run’]
[/codepen_embed]
Next Article step by step tutorial of this course.
