Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
​
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers