HTML5 Canvas Example

HTML

<h1>Drag the Text.</h1>

<canvas id="canvas" width="480" height="320"></canvas>
<input id="txtBallon" type="text">
<label id="dragText" width="100%" height="20">test</label>
<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();
    $('#dragText').draggable();
    
    $("#txtBallon").keyup(function(){
      $("#dragText").text($("#txtBallon").val())
    });
     

    $('#draw').click(function() {
    var text = document.getElementById('txtBallon').value;
   
        var $ballon = $('#ballon'),
            $dragText = $('#dragText');
            $canvas = $('#canvas');
        var ballon_x = $ballon.offset().left - $canvas.offset().left,
            ballon_y = $ballon.offset().top - $canvas.offset().top;
         var text_x = $dragText.offset().left - $canvas.offset().left,
            text_y = $dragText.offset().top - $canvas.offset().top;    

       // context.drawImage(ballon, ballon_x, ballon_y);
        context.font = "20px Verdana";
        context.fillText(text,text_x,text_y);
        
        $ballon.hide();
        $dragText.hide();
        $(this).attr('disabled', 'disabled');
    });
});