HTML5 Canvas Example

HTML

<canvas id="canvas1"></canvas>

CSS

#canvas1 {
   border: 1px dotted black; 
}
#background {
    display: none;
} 
#ballon {
    position: absolute;
    top: 50px;
    left: 50px;
    cursor: move;
    opacity: 0.5;
}

JavaScript

var newCanvas = document.createElement('canvas');
newCanvas.width = 200;
newCanvas.height = 300;
var ctx = newCanvas.getContext('2d');

var bgImage = new Image();
bgImage.onload = function(){
  ctx.drawImage(bgImage, 0, 0,200,300);
  var newCanvas1 = document.getElementById('canvas1');
  newCanvas1.width = 800;
  newCanvas1.height = 600;
  var ctx1 = newCanvas1.getContext('2d');

  var bgImage1 = new Image();
  bgImage1.onload = function(){
    ctx1.drawImage(bgImage1, 0, 0,800,600);
  }
  bgImage1.src = dataURL;
  //bgImage1.src = "http://i.imgur.com/gwlPu.jpg";
}
bgImage.src = "http://i.imgur.com/PWSOy.jpg";
var dataURL = newCanvas.toDataURL("image/png");