Load an image into a canvas

Stack Overflow question - http://stackoverflow.com/questions/32840813/angular-file-upload

HTML

<button>Load image into Canvas</button>
<br />
<br />
<canvas></canvas>

JavaScript

// source of a large image - replace this with the URL of the uploaded image (served from the database)
var IMAGE_SRC = "http://cdn-media-1.lifehack.org/wp-content/files/2014/09/activities-on-the-beach.jpg";

// set the height for the thumbnail - your uploader currently has 100
var height = 100;

function drawImage() {
    // create a new Image object
    var img = new Image();

    // set up the onLoad handler on the image object to draw the thumbnail into the canvas
    img.onload = function () {
        // calculate the thumbnail width for the fixed height above, respecting the image aspect ratio
        var width = this.width / this.height * height;
        
        // set the dimensions on the canvas
        /*$("canvas").attr({
            width: width,
            height: height
        });*/
        
        // draw the image from the loaded image object
        var c = $("canvas")[0].getContext("2d");
        c.drawImage(img, 0, 0, width, height);
        c.font = "40pt Calibri";
        c.fillText("hola", 20, 50);
        
       // open the image in a new browser tab
       // the user can right-click and save that image
       var win=window.open();
       win.document.write("<img src='"+c.toDataURL()+"'/>"); 
    };

    // set the source of the image object to the URL of the uploaded image (served from the database)
    img.src = IMAGE_SRC;
}

function downloadCanvas(width, height){
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;
  draw(context);
  //return canvas.toDataURL();
  var win=window.open();
  win.document.write("<img src='"+canvas.toDataURL()+"'/>"); 
}

function draw(context){
    context.fillStyle = 'green';
    context.fillRect(10, 10, 100, 100);
	/*var img = new Image();
  img.onload = function(){
  	var width = this.width / this.height * height;
    context.fillStyle = 'green';
    context.fillRect(10, 10, 100, 100);
    context.drawImage(img,...