gistfile1.js

function main(){
    loadImage("image.png");   
}
 
function loadImage(imgFile, onload){
    var img = new Image();
    img.onload = function() { exec(img); };
    img.src = imgFile;
}
 
function exec(imgData){
    
    // create offscreen image
    var imageCanvas = createOffscreenCanvas(imgData.width,imgData.height);    
    var imageContext = imageCanvas.getContext('2d');
    imageContext.drawImage(imgData, 0,0);
    
    // copy a part from image to subimage
    var w = 32; var h = 32;
    var subImageData = imageContext.getImageData(16,16,w,h);    
    var subImage = createOffscreenCanvas(w,h);
    var subImageContext = subImage.getContext('2d');
    subImageContext.putImageData(subImageData,0,0);
    
    paintScene(subImage);
    
}
 
function createOffscreenCanvas(width,height){
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    return canvas;
}
 
 
function paintScene(subImage){
    var onscreenContext =  document.getElementById('onscreen').getContext('2d');    
    
    // it is possible to use subImage as stamp
    onscreenContext.drawImage(subImage,32,64);
    onscreenContext.drawImage(subImage,96,64);
    
    // apply transformation 
    onscreenContext.save();
    onscreenContext.translate(80,80);
    onscreenContext.rotate(45 * (Math.PI/180));
    onscreenContext.translate(-80,-80);
    onscreenContext.drawImage(subImage,64,64);
    onscreenContext.restore();    
}