Let's play a bit with the graphic & Canvas...
You can find the code here:
http://jsbin.com/umaDEvu/5/edit?html,output
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
var clicked = 0;
var loopMouth = 0;
var lastMouseX = 300;
var lastMouseY = 300;
var colorSetIndex = 2;
var colorSet = [["limegreen", "forestgreen", "darkgreen", "olive"],
["mediumblue", "blue", "darkblue", "indigo"],
["darkorange", "peru", "sienna", "darkgoldenrod"]];
function setColorSetIndex(colorIndex){
colorSetIndex = colorIndex;
}
function getMousePos(canvas, evt) {
// get canvas position
var obj = canvas;
var top = 0;
var left = 0;
while (obj && obj.tagName != 'BODY') {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
lastMouseX = evt.clientX - left + window.pageXOffset;
lastMouseY = evt.clientY - top + window.pageYOffset;
}
function drawFace(context) {
//left ear
context.beginPath();
var grd = context.createRadialGradient(125, 130, 10, 175, 130, 100);
grd.addColorStop(0.01, colorSet[colorSetIndex][0]);
grd.addColorStop(0.5, colorSet[colorSetIndex][1]);
grd.addColorStop(0.7, colorSet[colorSetIndex][2]);
grd.addColorStop(0.95, colorSet[colorSetIndex][3]);
context.arc(175, 150, 75, 0, 2*Math.PI, false);
context.fillStyle = grd;
context.fill();
// right ear
context.beginPath();
var grd = context.createRadialGradient(450, 95, 10, 425, 130, 100);
grd.addColorStop(0.01, colorSet[colorSetIndex][0]);
grd.addColorStop(0.5, colorSet[colorSetIndex][1]);
grd.addColorStop(0.7, colorSet[colorSetIndex][2]);
grd.addColorStop(0.95, colorSet[colorSetIndex][3]);
context.arc(425, 125, 75, 0, 2*Math.PI, false);
context.fillStyle = grd;
context.fill();
//face
context.beginPath();
var grd = context.createRadialGradient(300, 140, 50, 300, 170, 175);
grd.addColorStop(0.01, colorSet[colorSetIndex][0]);
grd.addColorStop(0.5, colorSet[colorSetIndex][1]);
grd.addColorStop(0.7, colorSet[colorSetIndex][2]);
grd.addColorStop(0.95, colorSet[colorSetIndex][3]);
context.arc(300, 200, 150, 0, 2*Math.PI, false);
context.fillStyle = grd;
context.fill();
}
function drawEyes(context, mx, my) {
var cx = [300, 220, 200, 250, 380, 350, 400];
var cy = [100, 130, 170, 160, 130, 150, 185];
var ray = [ 30, 20, 10, 10, 20, 10, 10];
for (var i = 0; i < cx.length; i++) {
//compute the multiplier for the mouse position
var mmx = ((mx-300)/300*ray[i]);
var mmy = ((my-200)/200*ray[i]);
context.beginPath();
var grd = context.createRadialGradient(cx[i]+mmx, cy[i]+mmy, 1, cx[i]+mmx, cy[i]+mmy, ray[i]*3);
grd.addColorStop(0.01, "black");
grd.addColorStop(0.1, "white");
grd.addColorStop(0.99, "gray");
context.arc(cx[i], cy[i], ray[i], 0, 2*Math.PI, false);
context.fillStyle = grd;
context.fill();
}
}
function drawMouth(context) {
var grd_m = context.createRadialGradient(300, 300, 10, 300, 300, 100);
grd_m.addColorStop(0.1, "red");
grd_m.addColorStop(0.6, "black");
//for closing the mouth
var diffLeft;
var diffRight;
//loopMouth goes from 0-100
// from 0-50 it close the mouth
//from 50-100 it reopen the mouth
if(loopMouth < 50)
{
tempLoopMouth = loopMouth;
diffLeft=((380-230)/50)*(tempLoopMouth+1);
diffRight=((330-250)/50)*(tempLoopMouth+1);
}
else
{
tempLoopMouth = (100-loopMouth);
diffLeft=((380-230)/50)*(tempLoopMouth+1);
diffRight=((330-250)/50)*(tempLoopMouth+1);
}
context.beginPath();
context.moveTo(220, 230);
context.bezierCurveTo(220, 380 - diffLeft, 380, 330 - diffRight, 380, 250);
context.closePath(); // complete custom shape
context.fillStyle = grd_m;
context.fill();
}
function drawBackground(context){
//set the background
var grd = context.createRadialGradient(300, 200, 50, 300, 200, 600);
grd.addColorStop(0.01, "white");
grd.addColorStop(0.5, "black");
context.arc(300, 200, 600, 0, 2*Math.PI, false);
context.fillStyle = grd;
context.fill();
}
function drawAll(context){
drawBackground(context);
drawFace(context);
drawEyes(context, lastMouseX, lastMouseY);
drawMouth(context);
}
// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
function animationLoop(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
if(clicked == 1)
loopMouth++;
if(loopMouth==100)
{
loopMouth = 0;
clicked = 0;
}
drawAll(context);
requestAnimFrame(animationLoop);
}
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.addEventListener('mousemove', function (evt) {
var mousePos = getMousePos(canvas, evt);
drawAll(context);
}, false);
canvas.addEventListener('click', function (evt) {
var mousePos = getMousePos(canvas, evt);
if(clicked == 0)
clicked = 1;
}, false);
drawAll(context, 300, 200);
// Start animation
animationLoop();
};
</script>
</head>
<body onmousedown="return false;">
<canvas id="myCanvas" width="600" height="400">
</canvas>
<button onclick="setColorSetIndex(0)"> green </button>
<button onclick="setColorSetIndex(1)"> blue </button>
<button onclick="setColorSetIndex(2)"> orange </button>
<div id="help">
Animations are:
<ul>
<li> moving mouse on the canvas = move eyes; </li>
<li> click on the canvas = close mouth; </li>
<li> click on the buttons = change monster color; </li>
</ul>
</div>
</body>
</html>
As you can see, there is basically no HTML. It is a pure drawing made in Javascript...
