Canvas Path, Canvas Line Join, Canvas Rounded Corners.
Canvas Path
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </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(100, 20); // line 1 context.lineTo(200, 160); // quadratic curve context.quadraticCurveTo(290, 200, 250, 120); // bezier curve context.bezierCurveTo(290, -40, 300, 200, 400, 150); // line 2 context.lineTo(400, 90); context.lineWidth = 3; context.strokeStyle = 'blue'; context.stroke(); </script> </body> </html> |
Result
Canvas Line Join
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // set line width for all lines context.lineWidth = 20; // miter line join (left) context.beginPath(); context.moveTo(99, 150); context.lineTo(149, 30); context.lineTo(199, 150); context.lineJoin = 'miter'; context.stroke(); // round line join (middle) context.beginPath(); context.moveTo(239, 150); context.lineTo(289, 90); context.lineTo(339, 150); context.lineJoin = 'round'; context.stroke(); // bevel line join (right) context.beginPath(); context.moveTo(379, 150); context.lineTo(429, 40); context.lineTo(479, 150); context.lineJoin = 'bevel'; context.stroke(); </script> </body> </html> |
Result
Canvas Rounded Corners
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var rectWidth = 200; var rectHeight = 300; var rectX = 100; var rectY = 50; var cornerRadius = 100; context.beginPath(); context.moveTo(rectX, rectY); context.lineTo(rectX + rectWidth - cornerRadius, rectY); context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius); context.lineTo(rectX + rectWidth, rectY + rectHeight); context.lineWidth = 5; context.stroke(); </script> </body> </html> |
Result
More Stories
Amazing html canvas examples
html5 capture image from camera
Canvas Element