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" />
X:<input type='text' id="bx" name='bx' ><br>
Y:<input type='text' id="by" name='by' ><br>
<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();

    $('#canvas').click(function ($event) {
     var $ballon = $('#ballon');
      $ballon.offset({
       left: $event.pageX - $ballon.width() / 2,
       top: $event.pageY - $ballon.height() / 2
      });
      var ballon_x=$ballon.offset().left - $canvas.offset().left;
      var ballon_y = $ballon.offset().top - $canvas.offset().top;
	  $('#bx').val(ballon_x );
	  $('#by') .val(ballon_y );
    });

    $('#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;
		$('#bx').val(ballon_x );
		$('#by').val(ballon_y );
        context.drawImage(ballon, ballon_x, ballon_y);

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