How to create a smile with context.quadraticCurveTo api

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.

html5 effect