Set line join style in JavaScript
Description
The following code shows how to set line join style.
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
canvas {<!-- w w w .j av a2 s.c om-->
border: thin solid black;
margin: 4px
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 20;
ctx.lineJoin = "round";
ctx.strokeRect(20, 30, 100, 100);
ctx.lineJoin = "bevel";
ctx.strokeRect(160, 20, 100, 100);
ctx.lineJoin = "miter";
ctx.strokeRect(300, 30, 130, 100);
</script>
</body>
</html>
The code above generates the following result.
Javascript Tutorial Canvas Shape
Clear a rectangle region on HTML5 canvas in...
Do shape composite in JavaScript
Draw Control points for quadratic Bezier cu...
Draw Fractals of lines in JavaScript
Draw Quadratic Bezier Curves in JavaScript
Draw a Bezier curve in JavaScript
Draw a arc with border and fill on HTML5 Ca...
Draw a circle in JavaScript
Draw a line on HTML5 canvas in JavaScript
Draw a line with shadow on HTML5 Canvas in ...
Draw a path with arc in JavaScript
Draw a path with lines in JavaScript
Draw a rectangle with border and fill on HT...
Draw a triangle on HTML5 Canvas in JavaScri...
Draw a zigzag path with lineTo method in Ja...
Draw an arc in JavaScript
Draw an arc with control points in JavaScri...
Draw spiral with lineTo method on HTML5 can...
Fill a rectangle in JavaScript
Paint a cloud by using bezier curve in Java...
Show Control points for Cubic Bezier Curves...
Use solid color to fill a triangle in JavaS...
Clear a rectangle region on HTML5 canvas in...
Do shape composite in JavaScript
Draw Control points for quadratic Bezier cu...
Draw Fractals of lines in JavaScript
Draw Quadratic Bezier Curves in JavaScript
Draw a Bezier curve in JavaScript
Draw a arc with border and fill on HTML5 Ca...
Draw a circle in JavaScript
Draw a line on HTML5 canvas in JavaScript
Draw a line with shadow on HTML5 Canvas in ...
Draw a path with arc in JavaScript
Draw a path with lines in JavaScript
Draw a rectangle with border and fill on HT...
Draw a triangle on HTML5 Canvas in JavaScri...
Draw a zigzag path with lineTo method in Ja...
Draw an arc in JavaScript
Draw an arc with control points in JavaScri...
Draw spiral with lineTo method on HTML5 can...
Fill a rectangle in JavaScript
Paint a cloud by using bezier curve in Java...
Set line join style in JavaScript
Set linecap on HTML5 canvas in JavaScriptShow Control points for Cubic Bezier Curves...
Use solid color to fill a triangle in JavaS...