gistfile1.js

var DEG2RAD = Math.PI/180.0;

function drawScene(imgSprite){    
    var spriteBuffer = new SpriteBuffer(imgSprite);    
    var context = document.getElementById('myCanvas').getContext('2d');
    
    var sprite = spriteBuffer.getSprite(0,0,32,32);
    context.rotate(45 * DEG2RAD);
    context.translate(100,100);    
    context.drawImage(sprite, 0, 0);
};

function loadImage(imageUrl, onload){
    var image = new Image();
    image.onload = function(){
        onload(image);        
    };
    this.image.src = imageUrl;
};

function main(){
    loadImage('./img/sprites.png', drawScene);
};

// --------- Spritebuffer -----------------

function SpriteBuffer(spriteImage) {        
        
    var imageBuffer;
    
    var initImageBuffer = function(spriteImage){
        var canvas = document.createElement('canvas');
        canvas.width = spriteImage.width;
        canvas.height = spriteImage.height;
        imageBuffer = canvas.getContext('2d');            
        imageBuffer.drawImage(spriteImage, 0, 0);
    };
    
    this.getSprite = function(x,y,w,h){
        var imgData = imageBuffer.getImageData(x,y,w,h);
        var sprite = document.createElement("canvas");
        sprite.width=w;
        sprite.height=h;            
        sprite.getContext('2d').putImageData(imgData, 0,0);
        return sprite;    
    };
    
    initImageBuffer(spriteImage);
};