People Late In Millions (per week)

var canvas, ctx; var monsterX=100, monsterY=100, monsterAngle=0; var incrementX = 0; var incrementY= 0; function init() { canvas = document.getElementById('myCanvas'); ctx=canvas.getContext('2d'); window.addEventListener('keydown', handleKeydown, false); window.addEventListener('keyup', handleKeyup, false); requestId = requestAnimationFrame(animationLoop); } function handleKeydown(evt) { if (evt.keyCode === 37) { //left key incrementX = -1; } else if (evt.keyCode === 39) { // right key incrementX = 1; } else if (evt.keyCode === 38) { //up key incrementY= -1; } else if (evt.keyCode === 40) { //down key incrementY= 1; } } function handleKeyup(evt) { incrementX = 0; incrementY = 0; } function animationLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawMonster(monsterX, monsterY, monsterAngle, 'grey', 'red'); monsterX += incrementX; monsterY += incrementY; requestId = requestAnimationFrame(animationLoop); } function drawMonster(x, y, angle, headColor, eyeColor) { ctx.save(); // Moves the coordinate system so that the monster is drawn // at position (x, y) ctx.translate(x, y); ctx.rotate(angle) // head ctx.fillStyle='green' ctx.fillRect(x+100,y+100, 200,200) //eye ctx.fillStyle='black' ctx.fillRect(x+120,y+150,30,15) //eye ctx.fillStyle='black' ctx.fillRect(x+250,y+150,30,15) //Mouth ctx.fillStyle='black' ctx.fillRect(x+250,y+205,30,15) //Mouth ctx.fillStyle='black' ctx.fillRect(x+120,y+205,30,15) //eye center //mouth ctx.fillStyle='black' ctx.fillRect(x+120,y+220,160,20) //beard ctx.fillStyle='black' ctx.fillRect(x+190,y+250,20,40) ctx.restore(); } function start() { requestId = requestAnimationFrame(animationLoop); } function stop() { if (requestId) { cancelAnimationFrame(requestId); } }