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.
