HTML5 Canvas como fondo de la imagen CSS?

Question

¿Es posible hacer que la imagen de fondo de un DIV sea un lienzo que se pueda modificar con getContext ("2d")?

Answer 1

Puede tener un lienzo dentro del div con posición css absoluta, otros elementos tienen que tener un índice z mayor que el lienzo.

Answer 2

Bueno, podría colocar un elemento de lienzo dentro del div, maximizar su altura y ancho, establecer su posición en relativa y su índice z en un valor negativo.

Sin embargo, si desea utilizar un CSS real background-image:..., deberá crear su imagen dentro de su lienzo. A continuación, puede utilizar toDataURL para obtener una URL de datos que se puede utilizar como valor para su original background-image:

var canvas = document.getElementById('canvas'); 
var data = canvas.toDataURL(); 
var myElement = document.getElementById('myelement'); 

myElement.style.backgroundImage = 'url('+data+')'; 

Si no desea crear una nueva fondo, pero manipular una ya existente, cargue el original fondo en un objeto de imagen (o conseguir una referencia) y el uso de drawImage:

var image = new Image(); 
image.onload = function(){ 
    context.drawImage(this,0,0); 
    someCallbackToManipulateTheImage(); 
} 
var src = myElement.style.backgroundImage.substr(4); 
src.substr(0,src.length - 1); 
image.src = src; 

Answer 3

Definir el fondo de la imagen de la div a esto:

"url('" + canvas.toDataURL() + "')"; 

Editar: En ese momento, tenga en cuenta que también puede hacer lo que desee con el lienzo, ya que la imagen de fondo seguirá conteniendo solo los datos de imagen que estaban en el lienzo en el momento en que llamó al lienzo. toDataURL(). Siéntase libre de descartar o dibujar en el lienzo, ya que no afectará el fondo de su div en ese punto.