In this article I am going to show you how to use the context.quadraticCurveTo api to create a smile on the html5 canvas. We need a control point, a starting point and the end point to draw the smile as shown below the article.
(function() { var context = document.getElementById('canvas').getContext('2d'); context.fillStyle = 'cornflowerblue'; context.strokeStyle = 'yellow'; context.shadowColor = 'rgba(144, 145, 148, 1.0)'; context.shadowOffsetX = 2; context.shadowOffsetY = 2; context.shadowBlur = 4; context.lineWidth = 20; context.lineCap = 'round'; context.beginPath(); context.moveTo(150, 130); context.quadraticCurveTo(225, 200, 300, 130); context.stroke(); })();
Don’t forget to include the canvas tag on the html5 page with the id=”canvas” assigned to it. The js code above will create the smile below.