HTML5 Canvas Example

HTML

<h1>Drag the Text.</h1>

<canvas id="canvas" width="480" height="320"></canvas>
<br/>
<input id="theText" type="text">
<img src="http://i.imgur.com/PWSOy.jpg" id="background" />

<div class="drag"><div id="myText" contenteditable="true" >Text here</div></div>


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

CSS

#canvas {}

#background {
  display: none;
}

.drag {
  position: absolute;
  top: 50px;
  left: 50px;
  cursor: move;
  opacity: 0.5;
  //border: solid 1px lightgreen;
	
	font-size:20px;
}

#myText{
	width:200px;
	height:50px;
	
	font-size:13px;
	font-family:'Arial';
}

JavaScript

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

  $('.drag').draggable();

  $('#draw').click(function() {
      var $canvas = $('#canvas');

var textX = $('#myText').offset().left - $canvas.offset().left;
var textY = $('#myText').offset().top - $canvas.offset().top + 12;
		context.font= "13px Arial";
		context.fillText($("#myText").text(),textX,textY);

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

$("#theText").keyup(function(){
	$("#myText").text($(this).val());
});