Question

In my javascript i draw onto a canvas, after that i whant the canvas to be converted to a png and shown in a div with the folowing code:

var dataURL = document.getElementById('myCanvas').toDataURL("image/png");
var imgObj = new Image();
imgObj.src = dataURL;
imgObj.onload = function() {document.getElementById('myImg').appendChild(imgObj); };

When i call this directly after drawing the canvas i get a completly blank image in “myImg” but if i call exactly the same code with the click on a link it gets drawn properly:

<a id="viewImgLnk" href="javascript:void()" onclick=" return convertCanvasToImage();">View Image</a>

<script>
    function convertCanvasToImage(){
        var dataURL = document.getElementById('myCanvas').toDataURL("image/png");
        var imgObj = new Image();
        imgObj.src = dataURL;
        imgObj.onload = function() {document.getElementById('myImg').appendChild(imgObj); };
    }
</script>

How can i get the image loaded directly without the link?

Answer 1

I got the code working with the help of allergic!

setTimeout(function() {
    var dataURL = document.getElementById('myCanvas').toDataURL("image/png");
    var imgObj = new Image();
    imgObj.src = dataURL;
    imgObj.onload = function() {document.getElementById('myImg').appendChild(imgObj); };
}, 300);