con questo workaround ho più o meno risolto:
codice:
function salva() {
var imageCopy = document.getElementById("img_salvataggio");
var canvasImg = canvas.style.backgroundImage;
imageCopy.src = canvas.toDataURL();
var imageContainer = document.getElementById("box_salvataggio");
imageContainer.style.display = "block";
var c = document.getElementById("final_canvas");
var ctx = c.getContext("2d");
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = canvasImg.replace('url(', '').replace(')', '').replace('"', '').replace('"', '');
imageObj2.src = canvas.toDataURL();
imageObj1.onload = function () {
ctx.drawImage(imageObj1, 0, 0, 533, 800);
imageObj2.onload = function () {
ctx.drawImage(imageObj2, 0, 0, imageObj2.width, imageObj2.height);
var img = c.toDataURL("image/png");
document.getElementById('final').innerHTML = '<img src="' + img + '" width="533" height="800">';
}
};
}
prendo il background messo sul canvas da disgno.
prendo l'immagine disegnata.
"disegno su un nuovo canvas".
creo un tag img e ci metto dentro la nuova immagine.
poi dovrò salvare il tutto su disco con php, ma direi che il grosso è fatto.
ciao!