anchor.diff:    $(function() {
       // Text Top
       $('.js-top-text-input').keyup(function() {
  -      var textTop = $(this).val();
  -      $('.js-top-text').text(textTop);
  +      drawCanvas();
       });
       // Text Bottom
       $('.js-bottom-text-input').keyup(function() {
  -      var textBottom = $(this).val();
  -      $('.js-bottom-text').text(textBottom);
  +      drawCanvas();
       });
     });
   </script>
  
positive.code: <%= render "shared/header" %>
  
  <div class="container">
    
    <div class="image-wrapper">
      <span class="text text-top js-top-text">You'll Get'em</span>
      <span class="text text-bottom js-bottom-text">Next Time</span>
      <img src="<%= "/images/getImage?id=#{@base_image.id}"%>" class="image" id="base_image">
    </div>
    
    <div class="card">
      <div class="item item-divider">
        Top Text
      </div>
      <div class="item item-text">
        <input type="text" class="u-full-width js-top-text-input" placeholder="Enter text">
        <select class="js-top-font-size" style="display: none;">
          <option selected>24px</option>
          <option>32px</option>
  
negative.code:       Bottom Text
      </div>
      <div class="item item-text">
        <input type="text" class="u-full-width js-bottom-text-input" placeholder="Enter text" id="bottom-text">
        <select class="js-bottom-font-size" style="display: none;">
          <option selected>24px</option>
          <option>32px</option>
  