How to Create a Smiley Face Using JavaScript

Harpreet Singh
Feb 28, 2015
25.8k
0
3
Article

smiley

Step 1

Create an HTML file Index.html and inside that add a canvas, give it a width of 400 and height of 200.

<!DOCTYPE html>
<html>
<head>
<title>
HTML CANVAS
</title> <!—a reference to the an external js file-->
<script src="script.js"></script>
</head>
<body onload="bodyLoad()">
<canvas id="mycanvas" width="400" height="200" onmousewheel="myfunction2();"></canvas>
</body>
</html>

Step 2

The next step is to create a JavaScript file “script.js”. In that JavaScript file create a function myFace.

To get the element reference of Canvas we can use its Id “myCanvas”. Pass it in the GetElementById function as a parameter which is present in the global variable document.

function myFace() {
var c = document.getElementById("mycanvas");
//to draw a surface on canvas element pass 2d as an argument in the getContext function
var draw = c.getContext("2d");
//to start a new path invoke BeginPath function.
//Call this function when you want to create a new path
draw.beginPath();
//to specify a color or style for your canvas use fillStyle property
draw.fillStyle = "yellow";
//to create a full circle invoke the arc method and in that method
//pass the value for x and y, radius, start point,
draw.arc(75, 75, 50, 0, Math.PI * 2, true);
//to close the path invoke the closePath function
draw.closePath();
//invoke fill function to fill the canvas with a circle and in that circle a color of yellow
draw.fill();
}

Call this function when the body content loads, in other words on:

<body onload="myfunction()">
<body onload="myFace()">
<p>Scroll your mouse over my face</p>
<canvas id="mycanvas" width="400" height="200"></canvas>
</body>

Save and open the HTML file using a web browser and the output will look like the following:

output

So, we have created a smiley face.

Step 3

The next thing we need to do is to add eyes to this face.

function myEye() {
var c = document.getElementById("mycanvas");
var eye = c.getContext("2d");
//moveTo function is used to move the starting point of the canvas to a new point
//x value is 55 and y value is 50
eye.moveTo(55, 50);
//from the new point, begin a new path
eye.beginPath();
//fill the style with color black
eye.fillStyle = "black";
//left round eye
eye.arc(50, 50, 4, 0, Math.PI * 2, true);
eye.closePath();
eye.fill();
//move to the new sub path from the current point and create a right eye
eye.moveTo(103, 49);
eye.beginPath();
eye.fillStyle = "black";
//right round eye
eye.arc(100, 50, 4, 0, Math.PI * 2, true);
eye.closePath();
eye.fill();
}

Create a new function and add myFace and myEye functions to it.

function bodyLoad() {
myFace();
myEye();
}

Pass this bodyLoad function in the onload event of the body element.

<body onload="bodyLoad()">

Refresh the page.

Step 4

The final step is to add a smile.

Create a new function, mySmile and add the following:

function mySmile() {
var c = document.getElementById("mycanvas");
var smile = c.getContext("2d");
//105 means x it will go the left side and 75 means y it will go upward of //downward
smile.moveTo(105, 75);
smile.beginPath();
smile.strokeStyle = "red";
smile.arc(75, 75, 30, 0, Math.PI, false);
//to draw a half rounded circle with a line stroke we can invoke the stroke function
smile.stroke();
}
Add mySmile function in bodyLoad function.
function bodyLoad() {
myFace();
myEye();
mySmile();
}