Question

I use the buffering method to update a canvas, the thing is when I draw an Image in my buffer canvas and apply it to the real canvas there is no image at the real canvas. But I can apply anything else to the real canvas.

This is my code:

var ctx = $('#canvas')[0].getContext("2d"),
    width  = $("#canvas").width(),
    height = $("#canvas").height(),
    buffer = $("<canvas>")[0].getContext("2d");
ctx.canvas.width = width;
ctx.canvas.height = height;
buffer.canvas.width = width;
buffer.canvas.height = height;
var image = new Image();
image.src = "img/logo.png";
$(image).load(function() {
    buffer.drawImage(image, 0, 0);
});
ctx.drawImage(buffer.canvas, 0, 0);

Answer 1

It’s not working because these events are occuring:

1. you’re drawing an empty buffer to your regular canvas.
2. Then an image is done loading.
3. Then the image gets drawn on the buffer. You now have buffer-with-image, but that never gets drawn to the regular canvas.

If you put the ctx.drawImage line inside of the onload:

$(image).load(function() {
    buffer.drawImage(image, 0, 0);
    ctx.drawImage(buffer.canvas, 0, 0);
});

it would work like you want.