HTML5 Canvas Example

HTML

<h1>Drag the ballon.</h1>

<canvas id="canvas" width="480" height="320"></canvas>

<img src="http://i.imgur.com/PWSOy.jpg" id="background" />
<img src="http://i.imgur.com/6l6v2.png" id="ballon" />

<button id="draw">Draw</button>

CSS

#canvas {}

#background {
  display: none;
}

#ballon {
  position: absolute;
  top: 50px;
  left: 50px;
  cursor: move;
  opacity: 0.5;
}

JavaScript

$(document).ready(function() {
  var d_canvas = document.getElementById('canvas');
  var context = d_canvas.getContext('2d');
  var background = document.getElementById('background');
  var ballon = document.getElementById('ballon')
  context.drawImage(background, 0, 0);

  $('#ballon').draggable();

  $('#draw').click(function() {
    var $ballon = $('#ballon'),
      $canvas = $('#canvas');
    var ballon_x = $ballon.offset().left - $canvas.offset().left,
      ballon_y = $ballon.offset().top - $canvas.offset().top;

    context.drawImage(ballon, ballon_x, ballon_y);

    $ballon.hide();
    $(this).attr('disabled', 'disabled');
  });
});