HTML5 Canvas, File and JQuery Text Ghosting Issue

Question

What I am trying to do is create a real-time preview for a meme image. The code I am using I have pieced together from other examples. The problem I have is when I enter text to be previewed, when it is rendered on the canvas there is a ghosting effect. I am new to the canvas API, so any clarification/best practices would be appreciated. I put everything in this codepen: meme preview test

html:

<div class="container">
  <input type="file" name="file" id="file" class="inputfile"/>
  <label for="file">Choose a file ...</label>
  <br />
  <br />
  <input type="text" name="top-text" id="top-text" placeholder="Top text" />
  <br />
  <br />
  <input type="text" name="bottom-text" id="bottom-text" placeholder="Bottom text" />
  <br />
  <br />
  <canvas id="canvas" width='700' height='700'></canvas>
</div>

jquery/js:

$(document).ready(function(){

  var ctx = document.getElementById('canvas').getContext('2d');
      cvs = document.getElementById('canvas')
      input = document.getElementById('file');
      topText = document.getElementById('top-text');

  input.addEventListener('change', handleFiles);

  topText.addEventListener('keyup', drawText);

  function handleFiles(e) {
      var img = new Image;
      img.src = URL.createObjectURL(e.target.files[0]);
      img.onload = function() {
          ctx.drawImage(img,0,0,700,700);
          URL.revokeObjectURL(img.src);
      }
  }

  function drawText() {
    ctx.lineWidth  = 4;
    ctx.font = '20pt Impact';
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';

    var text1 = document.getElementById('top-text').value.toUpperCase();
    x = 700 / 2;
    y = 0;

    // wrapText(ctx, text1, x, y, 300, 28, false);
    writeText(text1, x, y);
  }

  writeText = function (text, x, y) {
    var f = null; // Font size (in pt)
    for (f = 36; f >= 0; f -= 1) {
      ctx.font = "bold " + f + "pt Impact, Charcoal, sans-serif";
      if (ctx.measureText(text).width < cvs.width - 10) {
        ctx.fillText(text, x, y);
        ctx.strokeText(text, x, y);
        break;
      }
    }
  };

   function wrapText(context, text, x, y, maxWidth, lineHeight, fromBottom) {

      var pushMethod = (fromBottom)?'unshift':'push';

      lineHeight = (fromBottom)?-lineHeight:lineHeight;

      var lines = [];
      var y = y;
      var line = '';
      var words = text.split(' ');

      for (var n = 0; n < words.length; n++) {
        var testLine = line + ' ' + words[n];
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;

        if (testWidth > maxWidth) {
          lines[pushMethod](line);
          line = words[n] + ' ';
        } else {
          line = testLine;
        }
      }
      lines[pushMethod](line);

      for (var k in lines) {
        context.strokeText(lines[k], x, y + lineHeight * k);
        context.fillText(lines[k], x, y + lineHeight * k);
      }
    }

  });