Meme Generator: Canvas is not defined

I'm trying to make a meme generator with Javascript.

This meme generator basically gets three inputs from the user and adds the text into the image.

This is my script.js file.

Now it works fine and perfectly and adds the text into the image.

But I also need to make those added texts draggable so the user can drag them around with his mouse.

Now in order to do that, I changed the script to this one.

But this one does not load the image and shows the message Uncaught TypeError: canvas is undefined at Console.

So if you know what's going wrong here, please let me know...

I would really appreciate any idea or suggestion from you guys.

This is also the html part:

<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>

from Meme Generator: Canvas is not defined