javascript - 入力テキストをjQueryの画像に変換しますか?

Question

jQuery と html では、入力テキストを画像に表示したいので、このようなマークアップがあります

  <div class="text-input-wrap">
    <input type="text" id="text-input"/> <br />
    <input id="button" type="submit" value="Preview" />
  </div><!--.text-input-wrap-->

入力テキスト領域にテキストを入力した後、誰かが [プレビュー] をクリックすると、テキストが画像として表示されるようにしたいと考えています。そのために、私はこのようなjQueryを持っています

    <script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#button').click(function() {
    var textvalue = $( "#text-input").val();
    alert(textvalue);
    var canvas = document.createElement('canvas'),
  ctx = canvas.getContext('2d');
  canvas.width  = 500;
  canvas.height = 500;
  canvas.style.borderRadius = "15px";
  document.body.appendChild(canvas); // Add canvas to DOM

  // GRAPHICS
  var canvasImage = new Image();

  // GRAPHICS TO CANVAS ///////////////////

  function drawCanvas() {
    ctx.drawImage(canvasImage, 0, 0);
  }

  function drawText( text ) {
    ctx.font = '90px Calibri';
    ctx.textAlign = 'center';
    ctx.fillStyle = 'rgba(70, 70, 255, 0.7)';
    ctx.fillText(text, canvas.width/2, canvas.height/2);
  }
  drawCanvas();
  drawText('textvalue'); 
    });
  });
  </script>

ここで、警告テキストはテキストの値を右に表示していますが、テキストが画像に変換されているときに入力テキストが表示されていませんか? 誰かが間違った部分を教えてもらえますか? どんな助けや提案も本当に価値があります。ありがとう..