How to Create a Smiley Face Using JavaScript

Harpreet Singh

6y83.9k15100Article

JavaScriptJavaScript Canvas DesignJavaScript SmileySmiley in JavaScript

15 Comments

Join the conversation! Your thoughts help the community grow.

Harpreet Singh11y ago
Vithal Wadje thank you sir
Vithal Wadje11y ago
nice
Humayun Kabir Mamun11y ago
Great Work...
Harpreet Singh11y ago
Mahmoud Algoul thank you
Harpreet Singh11y ago
Shaili Dashora thank you
Mahmoud Algoul11y ago
Nice
Shaili Dashora11y ago
Nice one Harpreet Singh
Harpreet Singh11y ago
Tom Mohan you too mate and thank you
Harpreet Singh11y ago
Sibeesh Venu thank you
Harpreet Singh11y ago
Rahul Saxena thank you mate
Harpreet Singh11y ago
Khargesh Rajput thank you
Tom Mohan11y ago
keep smiling..... good work :)
Sibeesh Venu11y ago
Nice...
Rahul Kumar Saxena11y ago
Good show bro... :)
Khargesh Rajput11y ago
Nice

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 that 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:

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();
}

Save and run it.

To learn more about Canvas Rendering click here.

I hope you like it. Thank you.