I applied a repeating background image from the canvas to the div via JavaScript like this:

var img_canvas = document.createElement('canvas');

img_canvas.width = 16;

img_canvas.height = 16;

img_canvas.getContext('2d').drawImage(canvas, 0, 0, 16, 16);

var img = img_canvas.toDataURL("image/png");

document.querySelector('#div').style.backgroundImage = 'url(' + img + ')';

I have to update it frequently. The problem is that it flickers on change, which doesn't seem to happen in Chrome, but is really bad in Firefox and Safari. Is it possible to prevent this? I don't think this is happening since it is a dataurl and therefore does not need to be downloaded.

solution:

// create a new Image object
var img_tag = new Image();

// when preload is complete, apply the image to the div
img_tag.onload = function() {

    document.querySelector('#div').style.backgroundImage = 'url(' + img + ')';
}

// setting 'src' actually starts the preload
img_tag.src = img;