I'm programmatically creating a very simple HTML Canvas on which I'm writing some text and then drawing an imported PNG Image.
I now want to "flatten" this canvas and export it out as a new Image.
It's working - but not 100%.
The issue is that while the text and background colors DO show up in the newly created and exported PNG, the image that was imported and drawn on the original canvas is NOT showing up.
Here's my code:
var newCanvas = document.createElement("canvas");
var context = newCanvas.getContext("2d");
// 1. Filling Canvas with Background Color:
context.fillStyle = "blue";
context.fillRect(0, 0, newCanvas.width, newCanvas.height);
// 2. Writing Text on the Canvas:
context.font = "30px Comic Sans MS";
context.fillStyle = "yellow";
context.textAlign = "center";
context.fillText("Hello World", newCanvas.width/2, newCanvas.height/2);
// 3. Adding a PNG to the Canvas:
let bgdImage = new Image();
bgdImage.src = "images/TilePattern1.png";
bgdImage.onload = function(){
context.drawImage(bgdImage, 0, 0, bgdImage.width, bgdImage.height);
}
// 4. Now I create a NEW Image object and set its contents to be
// all those elements I drew on my Canvas:
let finalImage = new Image();
finalImage.src = newCanvas.toDataURL();
So the resulting finalImage created by this code DOES have both the Background color and the Text I wrote - but it does NOT have the "TilePattern1.png" IMAGE I imported and drew on the canvas using .drawImage
What do I need to do to fix this?
(NOTE: the imported "TilePattern1.png" image DOES show up in the canvas drawn on the webpage; but it does NOT show up on the Image exported from the Canvas.)
My guess is that you have an error situation:
SecurityError The canvas's bitmap is not origin clean; at least some of its contents have or may have been loaded from a site other than the one from which the document itself was loaded.
UPDATE: I have now run your code fully and the first problem is that you are not waiting for the image to be loaded before creating the base64 from the canvas so it doesn't have the image in it. The second problem is that if you wait for the image to be loaded and then attempt to create the base64 you will see something like this error:
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
Here's the code which waits for the image to load so you can try for yourself:
<body>
<img />
<script>
var newCanvas = document.createElement("canvas");
var context = newCanvas.getContext("2d");
// 1. Filling Canvas with Background Color:
context.fillStyle = "blue";
context.fillRect(0, 0, newCanvas.width, newCanvas.height);
// 2. Writing Text on the Canvas:
context.font = "30px Comic Sans MS";
context.fillStyle = "yellow";
context.textAlign = "center";
context.fillText("Hello World", newCanvas.width/2, newCanvas.height/2);
// 3. Adding a PNG to the Canvas:
let bgdImage = new Image();
bgdImage.src = "images/TilePattern1.png";
bgdImage.onload = function(){
context.drawImage(bgdImage, 0, 0, bgdImage.width, bgdImage.height);
// 4. Now I create a NEW Image object and set its contents to be
// all those elements I drew on my Canvas:
let finalImage = new Image();
finalImage.src = newCanvas.toDataURL();
// below added so we can see the canvas and the final image (if you comment out the above line)
document.body.appendChild(finalImage);
document.body.appendChild(newCanvas);
}
</script>
</body>