title: printing just canvas element on a page
body: <p>im a little stuck using the canvas element in html5, have scoured the net looking for a workable solution but to no avail!</p>
  
  <p>the main issue is that I want to click a button and send just the canvas element on the page to the printer.</p>
  
  <p>i have tried using toDataUrl() - but this just seems to be resulting in a blank white image which has none of the canvas content!</p>
  
  <p>the other issue i am experiencing is that attempting to initiate any javascript functions using "onClick" attached to a form button seems to be being tempermental at best!</p>
  
  <p>here is my current attempt - this works in the sense that it does open a new window and attempt to send it to printer and it does create a base64 string (tested this using the "dataUrl" output on the second lowest document.write line) but as previously mentioned the image appears to be completely blank! (the canvas itself is definitely filled, both with an imported image and some text)  </p>
  
  <pre><code>function printCanv()  
  {  
    var dataUrl = document.getElementById('copy').toDataURL(); //attempt to save base64 string to server using this var  
    document.getElementById('testBox').value = dataUrl; //load data into textarea  
    //attempt open window and add canvas etc  
    win = window.open();  
    self.focus();  
    win.document.open();  
    win.document.write('&lt;'+'html'+'&gt;&lt;'+'head'+'&gt;&lt;'+'style'+'&gt;');  
    win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');  
    win.document.write('&lt;'+'/'+'style'+'&gt;&lt;'+'/'+'head'+'&gt;&lt;'+'body'+'&gt;');  
    ((image code is here but site will not let me post it for some reason?))  
    win.document.write(dataUrl);  
    win.document.write('&lt;'+'/'+'body'+'&gt;&lt;'+'/'+'html'+'&gt;');  
    win.document.close();  
    win.print();  
    win.close();  
  }  
  </code></pre>
  
  <p>note: the code from "win = window.open()" onwards is currently taken from a tutorial and not my own work!   </p>
  
  <p>it is currently being called using <code>&lt;body onload="printCanv";"&gt;</code> - for some reason I could not get this to work at all using a button (little chunk of code below is my attempt which seemed to fail)  </p>
  
  <pre><code>&lt;input type="button" id="test" value="click me" onClick="printCanv();"&gt; &lt;/input&gt;  
  </code></pre>
  
  <p>apologies is this help request is all over the place!  i haven't posted to a site like this before and it didn't like me posting some html/script!</p>
  
  <p>thanks in advance for any help you may be able to offer :)  </p>
  
  <p>Edit:  draw function:</p>
  
  <pre><code>function copydraw() {  //function called "copydraw" (could be anything)
      var testimage3 = document.getElementById('copy').getContext('2d');  //declare variable for canvas overall (inc paths)
      var img3 = new Image();  //declare image variable called "img3"
      var testVar = document.getElementById('userIn').value; //take value from userin box.  only updating on browser refresh?
      img3.onload = function(){  //when image has loaded (img.onload) run this function
          testimage3.drawImage(img3,0,0);  //draw "img" to testimage
          testimage3.font = "30pt 'Arial'"; //font method varies font attrib (weight, size, face)
          testimage3.fillStyle = "#000000"; //sets fill color
          testimage3.fillText(testVar, 310, 360); //filltext method draws text (xup ydown)
          }  
      img3.src = 'images/liecakeA4.jpg';  //source of image
  }
  </code></pre>
  
  <p>This function works perfectly, it draws the object and adds text from the variable, but for some reason it seems to be preventing me from outputting it as an image.  I'm really confused!</p>