Image Processing

$author:   Ching-Wen (Ed) Lai           
$date:     Mar. 2018
$keywords: image, processing, rgb, text

<h3>Request:</h3>

<form>
  <div>
    Input Text you want to show: (Could be in Chinese) <br> <input type="text"> <br>
    <input type="submit">
  </div>
</form>

<h3>Response:</h3>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

<script>
$(document).ready(function(){
  $("form").submit(function(event) {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.font = "20px Arial";
    ctx.fillText($( "input:first" ).val() ,10, 50);
    event.preventDefault();
  });
});
</script>