Post
Ask Question

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


Similar Articles