JavaScript

How to Create a Smiley Face Using JavaScript

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.

  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <title>  
  5.          HTML CANVAS  
  6.       </title> <!—a reference to the an external js file-->  
  7.       <script src="script.js"></script>  
  8.    </head>  
  9.    <body onload="bodyLoad()">  
  10.       <canvas id="mycanvas" width="400" height="200" onmousewheel="myfunction2();"></canvas>  
  11.    </body>  
  12. </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.
  1. function myFace() {  
  2.    var c = document.getElementById("mycanvas");  
  3.   
  4.    //to draw a surface on canvas element pass 2d as an argument in the getContext function  
  5.    var draw = c.getContext("2d");  
  6.   
  7.    //to start a new path invoke BeginPath function.  
  8.    //Call this function when you want to create a new path  
  9.    draw.beginPath();  
  10.   
  11.    //to specify a color or style for your canvas use fillStyle property  
  12.    draw.fillStyle = "yellow";  
  13.   
  14.    //to create a full circle invoke the arc method and in that method  
  15.    //pass the value for x and y, radius, start point,  
  16.    draw.arc(75, 75, 50, 0, Math.PI * 2, true);  
  17.   
  18.    //to close the path invoke the closePath function  
  19.    draw.closePath();  
  20.   
  21.    //invoke fill function to fill the canvas with a circle and in that circle a color of yellow  
  22. draw.fill();  
  23. }  
Call this function when the body content loads, in other words on:
  1. <body onload="myfunction()">  
  2.    <body onload="myFace()">  
  3.    <p>Scroll your mouse over my face</p>  
  4.    <canvas id="mycanvas" width="400" height="200"></canvas>  
  5. </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.
  1. function myEye() {  
  2.    var c = document.getElementById("mycanvas");  
  3.    var eye = c.getContext("2d");  
  4.    //moveTo function is used to move the starting point of the canvas to a new point  
  5.    //x value is 55 and y value is 50  
  6.    eye.moveTo(55, 50);  
  7.   
  8.    //from the new point, begin a new path  
  9.    eye.beginPath();  
  10.   
  11.    //fill the style with color black  
  12.    eye.fillStyle = "black";  
  13.   
  14.    //left round eye  
  15.    eye.arc(50, 50, 4, 0, Math.PI * 2, true);  
  16.    eye.closePath();  
  17.    eye.fill();  
  18.   
  19.    //move to the new sub path from the current point and create a right eye  
  20.    eye.moveTo(103, 49);  
  21.   
  22.    eye.beginPath();  
  23.    eye.fillStyle = "black";  
  24.    //right round eye  
  25.    eye.arc(100, 50, 4, 0, Math.PI * 2, true);  
  26.    eye.closePath();  
  27.    eye.fill();  
  28. }  
Create a new function and add myFace and myEye functions to it.
  1. function bodyLoad() {  
  2.    myFace();  
  3.    myEye();  
  4. }  
Pass this bodyLoad function in the onload event of the body element.
  1. <body onload="bodyLoad()">  
Refresh the page.

Refresh the page

Step 4

The final step is to add a smile.

Create a new function, mySmile and add the following:
  1. function mySmile() {  
  2.    var c = document.getElementById("mycanvas");  
  3.    var smile = c.getContext("2d");  
  4.    //105 means x it will go the left side and 75 means y it will go upward of //downward  
  5.    smile.moveTo(105, 75);  
  6.    smile.beginPath();  
  7.    smile.strokeStyle = "red";  
  8.    smile.arc(75, 75, 30, 0, Math.PI, false);  
  9.    //to draw a half rounded circle with a line stroke we can invoke the stroke function  
  10.    smile.stroke();  
  11. }  
  12. Add mySmile function in bodyLoad function.  
  13.   
  14. function bodyLoad() {  
  15.    myFace();  
  16.    myEye();  
  17.    mySmile();  
  18. }  
Save and run it.

Save and run it

To learn more about Canvas Rendering click here.

I hope you like it. Thank you.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs