Ich habe über JavaScript ein sich wiederholendes Hintergrundbild von der Leinwand auf das Div angewendet, etwa so:

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 + ')';

Ich muss es oft aktualisieren. Das Problem besteht darin, dass es bei Änderungen flackert, was in Chrome scheinbar nicht vorkommt, in Firefox und Safari jedoch sehr schlimm ist. Kann man das verhindern? Ich glaube nicht, dass dies geschieht, da es sich um eine Daten-URL handelt und daher nicht heruntergeladen werden muss.

Lösung:

// 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;