Home » Tutorials

HTML5 Face Builder

Tutorials
Author Reading 17 min Views 789 Published by Modified by

HTML5 Face Builder tutorial. This is another interesting application of HTML5. Today I have developed a little ‘toy’. This little toy can be enhanced into something big. Welcome to test new HTML5 tool – Face Builder (canvas). This tool will allow your members (visitors) to compose their faces, you can select through predefined elements (face, eyes, nose, mouth), and in end – you can ‘export’ result into image (like crop tool).

Here are our demo and downloadable package:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. HTML5 JS
  4. js/script.js
  5. Conclusion
Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the source files and lets start coding !

Step 1. HTML

Small code with canvas element and blank image (for future exported image)

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>HTML5 Face Builder | Script Tutorials</title>
06         <link href="css/main.css" rel="stylesheet" type="text/css" />
07         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
08         <script type="text/javascript" src="js/script.js"></script>
09     </head>
10     <body>
11         <header>
12             <h2>HTML5 image crop tool</h2>
13             <a href="https://www.script-tutorials.com/html5-face-builder/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
14         </header>
15         <div class="container">
16             <canvas id="scene" width="500" height="500"></canvas>
17             <div id="results">
18                 <h2>Use arrow keys to select your face details (up-down to select category, left-right to switch them), then click Spacebar to export as image.</h2>
19                 <img id="face_result" />
20             </div>
21         </div>
22     </body>
23 </html>

Step 2. HTML5 JS

js/script.js

001 // inner variables
002 var canvas, ctx;
003 var oHead, oEye, oNose, oMouth;
004 var iSel = 0;
005 // -------------------------------------------------------------
006 // objects :
007 function Head(x, y, x2, y2, w, h, image) {
008     this.x = x;
009     this.y = y;
010     this.x2 = x2;
011     this.y2 = y2;
012     this.w = w;
013     this.h = h;
014     this.image = image;
015     this.iSpr = 0;
016 }
017 function Eye(x, y, x2, y2, w, h, image) {
018     this.x = x;
019     this.y = y;
020     this.x2 = x2;
021     this.y2 = y2;
022     this.w = w;
023     this.h = h;
024     this.image = image;
025     this.iSpr = 0;
026 }
027 function Nose(x, y, x2, y2, w, h, image) {
028     this.x = x;
029     this.y = y;
030     this.x2 = x2;
031     this.y2 = y2;
032     this.w = w;
033     this.h = h;
034     this.image = image;
035     this.iSpr = 0;
036 }
037 function Mouth(x, y, x2, y2, w, h, image) {
038     this.x = x;
039     this.y = y;
040     this.x2 = x2;
041     this.y2 = y2;
042     this.w = w;
043     this.h = h;
044     this.image = image;
045     this.iSpr = 0;
046 }
047 // -------------------------------------------------------------
048 // draw functions :
049 function clear() { // clear canvas function
050     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
051 }
052 function drawScene() { // main drawScene function
053     clear(); // clear canvas
054     // draw head
055     ctx.drawImage(oHead.image, oHead.x2 + oHead.iSpr*oHead.w, oHead.y2, oHead.w, oHead.h, oHead.x, oHead.y, oHead.w, oHead.h);
056     // draw eyes
057     ctx.drawImage(oEye.image, oEye.x2 + oEye.iSpr*oEye.w, oEye.y2, oEye.w, oEye.h, oEye.x, oEye.y, oEye.w, oEye.h);
058     // draw nose
059     ctx.drawImage(oNose.image, oNose.x2 + oNose.iSpr*oNose.w, oNose.y2, oNose.w, oNose.h, oNose.x, oNose.y, oNose.w, oNose.h);
060     // draw mouth
061     ctx.drawImage(oMouth.image, oMouth.x2 + oMouth.iSpr*oMouth.w, oMouth.y2, oMouth.w, oMouth.h, oMouth.x, oMouth.y, oMouth.w, oMouth.h);
062     // draw controls
063     ctx.textAlign = 'center';
064     ctx.fillStyle = '#000';
065     ctx.font = '30px Verdana';
066     if (iSel == 0)
067         ctx.font = 'bold 30px Verdana';
068     ctx.fillText('< Head >', 400, 80);
069     ctx.font = '30px Verdana';
070     if (iSel == 1)
071         ctx.font = 'bold 30px Verdana';
072     ctx.fillText('< Eye >', 400, 180);
073     ctx.font = '30px Verdana';
074     if (iSel == 2)
075         ctx.font = 'bold 30px Verdana';
076     ctx.fillText('< Nose >', 400, 280);
077     ctx.font = '30px Verdana';
078     if (iSel == 3)
079         ctx.font = 'bold 30px Verdana';
080     ctx.fillText('< Mouth >', 400, 380);
081 }
082 // -------------------------------------------------------------
083 // initialization
084 $(function(){
085     canvas = document.getElementById('scene');
086     ctx = canvas.getContext('2d');
087     // initialization of dragon
088     var oHeadImage = new Image();
089     oHeadImage.src = 'images/image.png';
090     oHeadImage.onload = function() {};
091     oHead = new Head(0, 0, 0, 755, 300, 405, oHeadImage);
092     oEye = new Eye(40, 70, 0, 120, 235, 80, oHeadImage);
093     oNose = new Nose(70, 120, 0, 276, 180, 140, oHeadImage);
094     oMouth = new Mouth(60, 260, 0, 546, 170, 120, oHeadImage);
095     $(window).keydown(function(event){
096         switch (event.keyCode) {
097             case 38: // Up key
098                 iSel--;
099                 if (iSel < 0) {
100                     iSel = 3;
101                 }
102                 break;
103             case 40: // Up key
104                 iSel++;
105                 if (iSel >= 4) {
106                     iSel = 0;
107                 }
108                 break;
109             case 37: // Left key
110                 // update sprite positions
111                 if (iSel == 0) {
112                     oHead.iSpr--;
113                     if (oHead.iSpr < 0) {
114                         oHead.iSpr = 3;
115                     }
116                 }
117                 if (iSel == 1) {
118                     oEye.iSpr--;
119                     if (oEye.iSpr < 0) {
120                         oEye.iSpr = 4;
121                     }
122                 }
123                 if (iSel == 2) {
124                     oNose.iSpr--;
125                     if (oNose.iSpr < 0) {
126                         oNose.iSpr = 4;
127                     }
128                 }
129                 if (iSel == 3) {
130                     oMouth.iSpr--;
131                     if (oMouth.iSpr < 0) {
132                         oMouth.iSpr = 4;
133                     }
134                 }
135                 break;
136             case 39: // Right key
137                 // update sprite positions
138                 if (iSel == 0) {
139                     oHead.iSpr++;
140                     if (oHead.iSpr >= 4) {
141                         oHead.iSpr = 0;
142                     }
143                 }
144                 if (iSel == 1) {
145                     oEye.iSpr++;
146                     if (oEye.iSpr >= 5) {
147                         oEye.iSpr = 0;
148                     }
149                 }
150                 if (iSel == 2) {
151                     oNose.iSpr++;
152                     if (oNose.iSpr >= 5) {
153                         oNose.iSpr = 0;
154                     }
155                 }
156                 if (iSel == 3) {
157                     oMouth.iSpr++;
158                     if (oMouth.iSpr >= 5) {
159                         oMouth.iSpr = 0;
160                     }
161                 }
162                 break;
163             case 32: // Spacebar key - export results
164                 var temp_ctx, temp_canvas;
165                 temp_canvas = document.createElement('canvas');
166                 temp_ctx = temp_canvas.getContext('2d');
167                 temp_canvas.width = 360;
168                 temp_canvas.height = 410;
169                 // draw head
170                 temp_ctx.drawImage(oHead.image, oHead.iSpr*oHead.w, oHead.y2, oHead.w, oHead.h, oHead.x, oHead.y, oHead.w, oHead.h);
171                 // draw eyes
172                 temp_ctx.drawImage(oEye.image, oEye.iSpr*oEye.w, oEye.y2, oEye.w, oEye.h, oEye.x, oEye.y, oEye.w, oEye.h);
173                 // draw nose
174                 temp_ctx.drawImage(oNose.image, oNose.iSpr*oNose.w, oNose.y2, oNose.w, oNose.h, oNose.x, oNose.y, oNose.w, oNose.h);
175                 // draw mouth
176                 temp_ctx.drawImage(oMouth.image, oMouth.iSpr*oMouth.w, oMouth.y2, oMouth.w, oMouth.h, oMouth.x, oMouth.y, oMouth.w, oMouth.h);
177                 var vData = temp_canvas.toDataURL();
178                 $('#face_result').attr('src', vData);
179                 break;
180         }
181     });
182     setInterval(drawScene, 40); // loop drawScene
183 });

Most of code is already commented. So I will hope that you will understand all this code. If not – you always can ask me any related questions.

Live Demo

Conclusion

Welcome back to read something new and interesting about HTML5. Good luck in your projects.

Rate article
© 2026 Script Tutorials