Prev Demo
Line Cap
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Linecap</title> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(200, canvas.height / 2 - 50); context.lineTo(canvas.width - 100, canvas.height / 2 - 50); context.lineWidth = 20; context.strokeStyle = 'green'; context.lineCap = 'round'; context.stroke(); context.beginPath(); context.moveTo(500, canvas.height - 50); context.lineTo(canvas.width - 200, canvas.height / 2 - 50); context.lineWidth = 15; context.strokeStyle = 'pink'; context.lineCap = 'butt'; context.stroke(); context.beginPath(); context.moveTo(50, canvas.height / 2 - 50); context.lineTo( 150, canvas.height / 2 - 50); context.lineWidth = 10; context.strokeStyle = 'blue'; context.lineCap = 'square'; context.stroke(); </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
