Question

What am I doing wrong here?

Im trying to save a canvas drawing by having it open a new window and displaying .png in an img element that is positioned on the page with css.

From there you will have the option to download it or share it.

I have this so far, but the img src is not being populated with the toDataUrl();

function saveDrawing() {
    var url = canvas.toDataURL(); 
    window.open('saveimage.php'); 
    var placeholder = document.getElementById("placeholder");  
    placeholder.src = url;  
}

Any thoughts? Thanks!

Answer 1

document.getElementById("placeholder"); is not looking for that ID in the newly opened window, but in the current one.
All you have to do is reference the newly created window’s document:

function saveDrawing() {
    var url = canvas.toDataURL(); 
    w = window.open('saveimage.php'); 
    w.onload = function(){
        var placeholder = w.document.getElementById("placeholder");  
        placeholder.src = url;
    };  
}

This might have mistakes, the idea is that you store a reference to the new window in w, and then when it’s loaded, access it’s DOM to modify the image src