Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE HTML> <html> <head> <title>Title of the document</title> </head> <body> <canvas id="canvasId" width="500" height="200"></canvas> <script> let canvas = document.getElementById('canvasId'); let context = canvas.getContext('2d'); context.beginPath(); context.moveTo(180, 90); context.bezierCurveTo(120, 90, 120, 160, 240, 160); context.bezierCurveTo(260, 190, 300, 170, 350, 150); context.bezierCurveTo(410, 140, 440, 130, 380, 110); context.bezierCurveTo(440, 50, 350, 40, 350, 50); context.bezierCurveTo(310, 10, 270, 30, 240, 40); context.bezierCurveTo(310, 10, 130, 15, 180, 90); // complete custom shape context.closePath(); context.lineWidth = 7; context.strokeStyle = 'green'; context.stroke(); </script> </body> </html>