HTML5 Canvas Example

HTML

<h1>Drag the Text.</h1>

<canvas id="canvas" width="480" height="320"></canvas>
<input id="txtBallon" type="text">
<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 text = document.getElementById('txtBallon').value;
   
        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);
        context.font = "30px Verdana";
        context.fillText(text,ballon_x,ballon_y);
        
        $ballon.hide();
        $(this).attr('disabled', 'disabled');
    });
});