JavaScript表情包生成器添加文本拖拽时出现canvas未定义错误求助

我正在用JavaScript开发表情包生成器，核心功能是接收用户的三个文本输入并将文本添加到图片中。初始版本的脚本可以正常运行，能成功把文字添加到图片上；但为了让添加的文本支持鼠标拖动调整位置，我修改了脚本后，现在图片无法加载，控制台抛出错误：Uncaught TypeError: canvas is undefined。希望大家帮忙定位问题，任何想法或建议我都非常感激。

以下是对应的HTML代码：

<div class="box">
  <div>
    <div id="canvasWrapper">
    </div>
  </div>



  <div>
    <h3><i class="fa fa-picture-o fa-fw" aria-hidden="true"></i>Source Image</h3>
    <div class="box">
      <div>
        <p>From URL</p>
        <input id="imgURL" class="block" type="text" placeholder="Link to image" />
        <a href="http://memeful.com/" target="_blank">Memeful.com</a>
      </div>
      <div>
        <p>From Local Disk</p>
        <input id="imgFile" type="file" accept="image/*"/>
        <label for="imgFile" class="btn"><i class="fa fa-upload fa-fw"></i></label>
      </div>
    </div>



    <h3><i class="fa fa-commenting-o fa-fw" aria-hidden="true"></i>Meme Text</h3>
    <div class="box">
      <div>
        <p>Top Text</p>
        <input id="textTop" type="text" class="block" placeholder="Top text" />
      </div>
      <div>
        <p>Bottom Text</p>
        <input id="textBottom" type="text" class="block" placeholder="Bottom text" />
      </div>
    </div>
    <div class="box">
      <div>
        <p>Middle Text</p>
        <input id="textMiddle" type="text" class="block" placeholder="Middle text" />
      </div>
      <div>
        <p>Middle Text Size: <span id="textSizeMiddleOut">10</span></p>
        <input id="textSizeMiddle" type="range" min="1" max="100" value="10" class="slider" />
        </div>
    </div>
    
    
    <h3><i class="fa fa-text-height fa-fw" aria-hidden="true"></i>Text Size</h3>
    <div class="box">
      <div>
        <p>Top Text: <span id="textSizeTopOut">10</span></p>
        <input id="textSizeTop" type="range" min="2" max="50" step="2" />
      </div>
      <div>
        <p>Bottom Text: <span id="textSizeBottomOut">10</span></p>
        <input id="textSizeBottom" type="range" min="2" max="50" step="2" />
      </div>
    </div>

    
    
    <div class="box">
      <div>
        <h3><i class="fa fa-eye fa-fw" aria-hidden="true"></i>Preview Size</h3>
        <input id="trueSize" type="checkbox"/>
        <label for="trueSize"><span>Show true size</span></label>
      </div>
      
      
      
      <div>
        <h3><i class="fa fa-download fa-fw" aria-hidden="true"></i>Export</h3>
        <p>If the button doesn't work, right-click the image and save it</p>
        <p>If you are one mobile, download the source image and directly upload it</p>
        <button id="export">Export!</button>
      </div>

    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Pouya Vaghefi