Javascript Image not Drawing on Canvas after Drawing it to Offscreen Canvas

Question

I have an Image that I would like to render to a canvas. When I render it like so:

context.drawImage(image, x, y);

It works as expected. However when I do this:

if (image.loaded)
    image = getPreRendered(image);
...
var renderedImages = [];
var tmpImage = null;
function getPreRendered(img) {
    imageIndex = ("" + img.src);
    tmpImage  = cachedSprays[tmpIndex];
    if (tmpImage == undefined) {
        var tmpCanvas = document.createElement("canvas");
        var tmpContext = tmpCanvas.getContext('2d');
        tmpCanvas.width = 50;
        tmpCanvas.height = 50;
        tmpContext.drawImage(img, 0, 0, 100, 100);
        tmpContext.imageSmoothingEnabled = false;
        tmpContext.webkitImageSmoothingEnabled = false;
        tmpContext.mozImageSmoothingEnabled = false;
        tmpContext.drawImage(tmpCanvas, 0, 0, 50, 50, 0, 0, 100, 100);
        tmpImage = tmpCanvas;
        cachedSprays[imageIndex] = tmpImage ;
    }
    return tmpImage ;
}

When I do this however, the image is no longer visible on the canvas.

The image is created like this:

var image = new Image();
image.loaded = false;
image.onload = function () {
    image.loaded = true;
};

Answer 1

AJAX and image calls are asyncronous . An image will/would load but you already called that function while the image was still loading.

var image = new Image();
image.onload = function () {
    // call here your render canvas function:
    getPreRendered( image );
};
image.src = "nOOdes.jpg"