Canvas Text Download

HTML

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

<form id="myForm">
  <div class="form-group">
    <label for="myMessage">Message</label>
    <input type="text" name="myMessage" id="myMessage"/>
  </div>
  <button type="submit">
    Add Text
  </button>
</form>

<hr/>
<button type="button" id="myDownload">
Download
</button>

JavaScript

(function($){
	$("#myForm").on("submit", function(e){
  	e.preventDefault();
    var myMessage = $("#myMessage").val();
    
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText(myMessage,30,30);
  });
  
  $("#myDownload").on("click", function(){
  	var canvas = document.getElementById("myCanvas");
    var fullQuality = canvas.toDataURL("image/png", 1.0);
    window.open(fullQuality);
  });
})(jQuery);