Prev Demo
Line Join
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Linejoin</title> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.lineJoin = "miter"; ctx.moveTo(10, 150); ctx.lineTo(100, 100); ctx.lineTo(50, 16); ctx.lineWidth = 15; ctx.strokeStyle = "pink"; ctx.stroke(); ctx.beginPath(); ctx.lineJoin = "round"; ctx.moveTo(300, 120); ctx.lineTo(200 , 180); ctx.lineTo(150, 100); ctx.linewidth = 15; ctx.strokestyle = "pink"; ctx.stroke(); ctx.beginPath(); ctx.lineJoin = "bevel"; ctx.moveTo(400, 250); ctx.lineTo(19, 180); ctx.lineTo(130, 100); ctx.linewidth = 15; ctx.strokeStyle = "green"; ctx.stroke(); </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
