Question

I am trying to make work a button that would open a new window with the content of my canvas in it (a rendered image of the canvas).

Here’s my JS code :

var canvas  = document.getElementById("thecanvas");
var dataUrl = canvas.toDataURL();
var context = canvas.getContext("2d");
context.fillStyle = "rgba(0, 0, 255, .5)";
context.fillRect(25, 25, 125, 125);
function clickme() {
window.open(dataUrl, "toDataURL() image", "width=200, height=500");
}​

HTML code :

<input type="button" onclick="clickme()" value="OPEN"/>

<canvas id="thecanvas" height="200" width="500" style="border:1px solid black"> 

But when I click on the “OPEN” button, nothing happens…but I really don’t see why. I have looked on alot of sites for tutorials. I even copied and pasted some codes, but still nothing happens. Am I doing something wrong? Thank you!

Answer 1

First off, the order in which you execute your statements matters. You need to call toDataURL after you draw to the canvas, or the dataURL generated with not contain that content.

I’m not sure what your script tags are like, but here’s a working example that does the event in a slightly more foolproof way: http://jsfiddle.net/b7G6J/

HTML:

<input id="thebutton" type="button" value="OPEN"/>

<canvas id="thecanvas" height="200" width="500" style="border:1px solid black"> 

JS:

var canvas  = document.getElementById("thecanvas");
var context = canvas.getContext("2d");

// First drawing commands
context.fillStyle = "rgba(0, 0, 255, .5)";
context.fillRect(25, 25, 125, 125);
// Then toDataURL
var dataUrl = canvas.toDataURL();

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

​