Canvas toDataURL () dando image en blanco

Soy un principiante completo de JS y solo estoy jugando con HTML5. Mientras experimento, me encontré con este problema. Tengo algo como esto:

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> function graph() { // ...stuff that draws to canvas, verified "working"... var downloadLink = document.getElementById("myCanvas").toDataURL(); $("#dlLink").attr("href", downloadLink); } $(window).load(function() { graph(); }); </script> </head> <body> <div class="container"> <h1 style = ";padding-bottom:30px;"><a href="#">Tool</a></h1> <canvas id="myCanvas" width="400" height="400"></canvas> <a href="#" id="dlLink">Download</a> </div> </body> </html> 

Cuando hago clic en el enlace de descarga con la encoding base64, aparece una image en blanco. ¿Alguien puede sacar a la luz por qué sucede esto? Parece que el enlace se genera antes de que el canvas tenga algo, pero no estoy seguro.

En cambio, intente esto:

 $("#dlLink").click(function(){ var win=window.open(); win.document.write("<img src='"+document.getElementById("myCanvas").toDataURL()+"'/>"); }); 

Intente pasar aDataURL un tipo de contenido como "image / png" o "image / jpeg". ( canvas.toDataURL("image/png") );