Draw smiley in HTML5

This article demonstrate how can you draw smileys in your HTML5 document. The article also covers the how to draw an arc and fill with gradient color.
We have seen ‘how to draw a polygon in HTML 5‘ in my previous post that demonstrates how to draw the straight path or line if not then you should read that.

To draw a smiley, first we need to draw a circle and to draw a circle, the easiest way is to use arc. This draws a circle on the canvas using the current fillStyle. So let’s start with arc(x, y, radius, startAngle, endAngle, anticlockwise) method for drawing a circle with linear gradient effect.and then we draw the circles for eyes of the smiley face. i have written the comments in the code for which code section can do what.

<!DOCTYPE HTML>
<html>
<head>
<title>An example to draw an polygon</title>
<script type="text/javascript">
    function drawPolygon() {
        var canvas = document.getElementById('canvasbox');
        if (canvas.getContext) {
            var objctx = canvas.getContext('2d');
            //------first smiley----------- 
            // draw the first circle
            objctx.arc(50, 50, 20, 0, 360, true);
            // create Linear gradient fill style
            var grd = objctx.createLinearGradient(40, 40, 50, 75);
            grd.addColorStop(0, '#F9FF00');
            grd.addColorStop(1, '#E0C000');
            // Set the fill style
            objctx.fillStyle = grd;
            objctx.fill();
            // Create others circles
            objctx.beginPath();
            objctx.arc(44, 45, 4, 0, 360, true);
            objctx.fillStyle = "#ffffff";
            objctx.fill();
 
            objctx.beginPath();
            objctx.arc(44, 45, 2, 0, 360, true);
            objctx.fillStyle = "#000000";
            objctx.fill();
 
 
            objctx.beginPath();
            objctx.arc(58, 45, 4, 0, 360, true);
            objctx.fillStyle = "#ffffff";
            objctx.fill();
 
            objctx.beginPath();
            objctx.arc(58, 45, 2, 0, 360, true);
            objctx.fillStyle = "#000000";
            objctx.fill();
            objctx.beginPath();
            objctx.arc(50, 55, 10, 0, Math.PI, false);
            objctx.stroke();
 
            //------second smiley----------- 
            objctx.beginPath();
            objctx.arc(100, 50, 20, 0, 360, true);
            var grd = objctx.createLinearGradient(40, 40, 50, 75);
            grd.addColorStop(0, '#F9FF00');
            grd.addColorStop(1, '#E0C000');
            objctx.fillStyle = grd;
            objctx.fill();
 
            objctx.beginPath();
            objctx.arc(94, 45, 4, 0, 360, true);
            objctx.fillStyle = "#000000";
            objctx.fill();
 
            objctx.beginPath();
            objctx.arc(106, 45, 4, 0, 360, true);
            objctx.fillStyle = "#000000";
            objctx.fill();
 
            objctx.beginPath();
            objctx.arc(100, 62, 10, 0, Math.PI, true);
            objctx.stroke();
        } else {
            alert('You need HTML5 compatible browser to see this demo.');
        }
    }
</script>
</head>
<body onload="drawPolygon();">
   <canvas id="canvasbox"></canvas>
</body>
</html>

Extra Notes- How to draw

You are also seeing in the code the we are using the beginpath() method at the start up for drawing the each shape. see the aboutpath() method in canvas.

There are two another methods! we are using in the code for filling the linear gradient fill style – one is and another is addColorStop(offset, color).

createLinearGradient(x1,y1,x2,y2) method returns a CanvasGradient object that represents a linear gradient that paints along the line given by the coordinates represented by the arguments. The four arguments represent the starting point (x1,y1) and end point (x2,y2) of the gradient.

addColorStop(offset, color) method adds a color stop with the given color to the gradient at the given offset. Here 0.0 is the offset at one end of the gradient, 1.0 is the offset at the other end.