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 lang="en">
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style type="text/css">
    canvas { 
      border:1px solid black;
    }
</style>
</head>
<body onload="init();">
  <p> Move the mouse = draw the monster at mouse position, press a button = rotate the monster!</p>
<canvas id="myCanvas" width="400" height="400">
   Your browser does not support the canvas tag.
</canvas>
<p>
  
<script>
   var canvas, ctx;
   var monsterX=100, monsterY=100, monsterAngle=0;
   var incrementX = 0;
   var incrementAngle =0;
   var mousePos;
  
   function init() {
     // This function is called after the page is loaded
     // 1 - Get the canvas
     canvas = document.getElementById('myCanvas');
     // 2 - Get the context
     ctx=canvas.getContext('2d');
         
     // 3bis add mouse listeners
     canvas.addEventListener('mousemove', handleMousemove, false);
     canvas.addEventListener('mousedown', handleMousedown, false);
     canvas.addEventListener('mouseup', handleMouseup, false);
​
     // 4 - start the animation
     requestId = requestAnimationFrame(animationLoop);
   }
   
  function handleMousemove(evt) {
    // The mousePos will be taken into account in the animationLoop
    mousePos = getMousePos(canvas, evt);
  }
  
  function handleMousedown(evt) {
    //the increment on the angle will be
    // taken into account in the animationLoop
    incrementAngle = 0.1;
  }
  
  function handleMouseup(evt) {
    incrementAngle = 0;
  }
  
  function getMousePos(canvas, evt) {
   // necessary to take into account CSS boudaries
   var rect = canvas.getBoundingClientRect();
   return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
   };
}
  
  
   function animationLoop() {
      // 1 - Clear
      ctx.clearRect(0, 0, canvas.width, canvas.height);
​
      // 2 Draw
      drawMonster(monsterX, monsterY, monsterAngle, 'green', 'yellow');
​
      // 3 Move
     if(mousePos !== undefined) {
        monsterX = mousePos.x;
        monsterY = mousePos.y;
        monsterAngle += incrementAngle;
     }
​
      // call again mainloop after 16.6 ms (60 frames/s)
      requestId = requestAnimationFrame(animationLoop);
 }   
   function drawMonster(x, y, angle, headColor, eyeColor) {   
     // GOOD PRACTICE : SAVE CONTEXT AND RESTORE IT AT THE END
     ctx.save();
     
     // Moves the coordinate system so that the monster is drawn
     // at position (x, y)
     ctx.translate(x, y);
     ctx.rotate(angle)
     // translate in Y -(width of monster/2), and in Y -(height of monster/2)
     // in order to rotate around the monster center instead of its top left
     // corner. Try to comment the next line
     // and click to rotate the monster!
     ctx.translate(-100, -100);
     
     // head
     ctx.fillStyle=headColor;
     ctx.fillRect(0,0,200,200);
     
     // eyes
     ctx.fillStyle='red';
     ctx.fillRect(35,30,20,20);
     ctx.fillRect(140,30,20,20);
     
     // interior of eye
     ctx.fillStyle=eyeColor;
     ctx.fillRect(43,37,10,10);
     ctx.fillRect(143,37,10,10);
     
     // Nose
     ctx.fillStyle='black';
     ctx.fillRect(90,70,20,80);
     
     // Mouth
     ctx.fillStyle='purple';
     ctx.fillRect(60,165,80,20);
     
     // GOOD PRACTICE !
     ctx.restore();
   }
        
function start() {
   // Start the animation loop, targets 60 frames/s
   requestId = requestAnimationFrame(animationLoop);
 }
 function stop() {
   if (requestId) {
      cancelAnimationFrame(requestId);
   }
 }
</script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
AuroreDechampspro
0viewers