Question

I am trying to use toDataURL in Html5 Canvas to export an image to a PNG file in a new window.

Here’s my JS code (I think you guys need to see it all to check if there’s something wrong)

var oCtx;
var oCanvas;
var img;
var oImg;

function updateClicked() {


    oCanvas.width = oCanvas.width;
    oCtx.drawImage(img,0,0); 

    oCtx.font = "normal 23px arial";     // different font
oCtx.textBaseline = "top";           // text baseline at the top
oCtx.fillStyle = "#666";
oCtx.fillText(document.getElementById("attentionde").value, 255, 365);

oCtx.font = "bold 28px arial";     // different font
oCtx.fillStyle = "red";
oCtx.fillText(document.getElementById("nofacture").value, 172, 226);

}
// setup our test canvas
// and a simple drawing function
window.onload = function() {
    oCanvas = document.getElementById("thecanvas");
    oCtx = oCanvas.getContext("2d");

    var iWidth = oCanvas.width;
    var iHeight = oCanvas.height;

    img=new Image();
    img.src="Fond_Facture_Medio.jpg"; //My background image source

//BACKGROUND-IMAGE//
img.onload = function(){
oCtx.drawImage(img,0,0);  

};

var dataUrl = oCanvas.toDataURL();

var button = document.getElementById("thebutton");
button.onclick =function() {
  window.open(dataUrl, "toDataURL() image", "width=1275, height=1650");
}  
}​

When I click on my button (id=”thebutton”)…it does open a new window with a PNG file in it, but the png is blank…Seems like it does not get the images drawn in the Canvas for a unknown reason.

I tried adding this code right before the var dataUrl = oCanvas.toDataURL(); line :

oCtx.fillStyle = "rgba(0, 0, 255, .5)";
oCtx.fillRect(25, 25, 125, 125);

Just to test if I was drawing a shape, it would save it through the dataURL process.
When I tested it, by clicking on the “thebutton” button, it opened a new window, and voila! I was able to see and save the canvas image with a light-blue rectangle in it…but no backgroud-image, and no text…nothing else. I really don’t understand what’s wrong. Thank you!

Answer 1

Move this line

var dataUrl = oCanvas.toDataURL();

inside the button.onclick handler.

At the moment you create the data URL, neither the window element nor any img element fired its load event, so nothing has been drawn.