Question

I have two questions that both work together so I’m putting it in as one.

I’m attempting to duplicate what a user has drawn on one HTML5 canvas to another.

To do this I’m grabbing the dataURL using javascript and assigning a new image to that dataurl and then assigning that image to draw my second canvas’s drawImage. Here is the code.

duplicate=function(){       
    dataURL = oCanvas.toDataURL();
    img.src = dataURL;
    context2.drawImage(img, 0, 0);
        };

The issue with this code is I have to push the duplicate button twice in order for it to show on the second canvas. I believe this is because its trying to do everything in the function at once. When I click duplicate the first time its setting the dataURL and the img src at the same time and img.src is seeing it as an empty string. The second type I click it I’ve already stated that dataURL is what it is and img.src sees it as that…

How do I fix this?

My main goal however is saving this dataURL to a database I’ve attempted to use an ajax with the get method but the problem here is dataURL contains so many characters that cause issue with get.

Is there a special way I can encode the dataURL and make it get/ajax friendly so I can save it to my database?

Thank you very much!

Answer 1

If the problem is that you are just doing to much or trying to draw the second image too early.

Call context2.drawImage() on img.onload()