Q:

How to get a picture drawn in canvas using drawImage ()?

I'm trying to write a function that lets a user download an image drawn in a canvas.
Here's the code:
canvas.html:
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="canvas.js"> </script>
  </head>
  <body onload="="draw()">
    <button type="button" onClick="saveImage()"> save image</button>
    <canvas width="1600" height="1440" id="canvas"></canvas>
  </body>
</html>

canvas.js
function draw() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillRect(550, 150, 300, 300);
  ctx.fill();
  ctx.moveTo(722, 380);
  ctx.arc(380,380,350,0,2*Math.PI);
  ctx.lineWidth=15;
  ctx.strokeStyle="blue";
  ctx.stroke();
}

function download_image() {
  var _image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  window.location.href = _image;
  alert("start")
}

The code works - provided the image is drawn "normally" / as above - and not loaded with the drawImage() function.
As soon as I change the canvas.js file to:
function draw() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var img2= new Image();
  img2.onload=function() {
    ctx.drawImage(img2, 0, 50);
  }
  img2.src="./smile.png";
}

function saveImage() {
  var _image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  // tu sobie pobieramy adres URL i konwertuje na 'octet-stream'
  window.location.href = _image;
  alert("start");
}

Unfortunately, nothing happens. No alert pops up. The console shows the following error: "Uncaught TypeError: Can not read property 'toDataURL' of undefined
     at saveImage (canvas.js: 17)
     at HTMLButtonElement.onclick "
How to fix it? Can I download a picture drawn with drawImage()? How?

A:

/**
 *    Ken Fyrstenberg Nilsen
 *    Abidas Software
*/
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

/**
 * Demonstrates how to download a canvas an image with a single
 * direct click on a link.
 */
function doCanvas() {
    /* draw something */
    ctx.fillStyle = '#f90';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = '60px sans-serif';
    ctx.fillText('Code Project', 10, canvas.height / 2 - 15);
    ctx.font = '26px sans-serif';
    ctx.fillText('Click link below to save this as image', 15, canvas.height / 2 + 35);
}

/**
 * This is the function that will take care of image extracting and
 * setting proper filename for the download.
 * IMPORTANT: Call it from within a onclick event.
*/
function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}

/** 
 * The event handler for the link's onclick event. We give THIS as a
 * parameter (=the link element), ID of the canvas and a filename.
*/
document.getElementById('download').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
}, false);

/**
 * Draw something to canvas
 */
doCanvas();
 body {
     background-color:#555557;
     padding:0;
     margin:0;
     overflow:hidden;
     font-family:sans-serif;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 canvas {
     border:1px solid #000;
     float:left;
     clear:both;
 }
 #download {
     float:left;
     cursor:pointer;
     color:#ccc;
     padding:3px;
 }
 #download:hover {
     color:#fff;
 }
 /*
 div, input {
     font-size:16px;
     font-family:sans-serif;
     border:1px solid #000;
     border-radius: 5px;
     float:left;
     padding:5px;
     width:50px;
     margin:1px 1px;
     background-color:#bbb;
 }
 input[type='text'] {
     font-size:16px;
     font-weight:bold;
     width:70px;
     text-align:center;
     background-color:#fff;
     padding-bottom:4px;
 }
 input[type='button'] {
     font-size:16px;
     font-weight:bold;
     width:110px;
     text-align:center;
     background-color:#333;
     color:#eee;
     padding-bottom:4px;
 }
 input[type='button']:hover {
     background-color:#fff463;
     color:#000;
 }
 input[type='range'] {
     width:100px;
     margin:0 0 0 10px;
 }
*/
 
<canvas width="500" height="300" id="canvas">Sorry, no canvas available</canvas>
<a id="download">Download as image</a>

found a solution here:
http://jsfiddle.net/wboykinm/fL0q2uce/
function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}

