rAF - 01 Simple Bounce

HTML

<div id="game"><canvas id="game-canvas" width="500" height="400"></canvas></div>
<div id="debug"></div>

CSS

#game-canvas {
    border: 1px solid #ccc;
    background-color: black;
}

JavaScript

var x = 10, y = 10;
var xDx = 1, yDy = 1;

var anim = null;
var canvas = null;
var ctx = null;

var xIncreasing = true;
var yIncreasing = true;

function updateAnimation() {
    var lastImage = ctx.getImageData(0,0,canvas.width,canvas.height);
    var pixelData = lastImage.data;
    
    var i;
    var len = pixelData.length;
    for (i = 3; i < len; i += 4) {
         pixelData[i] -= 3;
    }
    ctx.putImageData(lastImage,0,0);

    requestAnimationFrame(updateAnimation);
}

$(function () {
    canvas = document.getElementById('game-canvas');
    ctx = canvas.getContext('2d');
    
    
    ctx.fillStyle = "orange";
    ctx.strokeStyle = "yellow";
    ctx.lineWidth = 3;
    
    requestAnimationFrame(updateAnimation);
    
});