title: JS object events
body: <p>I've been using JS for a long time, but i'm just getting into properly using objects. </p>
  
  <p>I'm creating an image generator using canvas, which you can then download as a png. The user can add text to the image using input boxes. I've made this a JS object so that I can create multiple instances of it on a page. It all works fine, except for my event listener to update the text.</p>
  
  <p>The input boxes are created by parameters passed to the function, and then a keyup event is added so that the canvas can update as the user types. This is all working, except for that fact I don't know how to tell the keyup event what JS Object it should be updating.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>function Canvas_to_img( name, container, image, height, width, content_areas ){
      // Assign params to object
      object = this;
      this.name = name;
      this.container = container;
      this.image = image;
      this.height = height;
      this.width = width;
      this.content_areas = content_areas;
  
      // Prepare image
      var imageObj = new Image();
      imageObj.src = image;
  
      // Add canvas div
      container.prepend('&lt;div class="canvas canvas--' + name + '"&gt;&lt;/div&gt;')
  
      // Add temp canvas div
      container.append('&lt;div class="canvas-temp canvas-temp--' + name + '"&gt;&lt;/div&gt;')
  
      // Add canvas wrapper
      var wrapper = new Concrete.Wrapper({
        container: container.find('.canvas')[0],
        width: width,
        height: height
      });
  
      // Add BG and Text layers
      var bgLayer = new Concrete.Layer();
      var textLayer = new Concrete.Layer();
      wrapper.add(bgLayer).add(textLayer);
  
      // Add image to BG layer
      imageObj.onload = function() {
          bgLayer.sceneCanvas.context.drawImage(imageObj,0,0, width, height);
      };
  
      // Set up input areas and event listeners
      for (key in content_areas){
  
          for (subkey in content_areas[key].fields){
              name_field = content_areas[key].fields[subkey].name;
              name_layer = content_areas[key].fields[subkey].name;
  
              // Add input fields for text layer
              container.prepend('&lt;div class="field-set__item"&gt;\
                  &lt;span class="field-set__label"&gt;' + name_field +'&lt;/span&gt;\
                  &lt;input data-object="'+object+'" data-area="' + key + '" data-name="' + name + '" data-field="' + subkey + '" class="field-set__input ' + name_field + '" id="text1" type="text"&gt;\
              &lt;/div&gt;');
  
              $( "."+name_field ).keyup(function() {
                  area = $(this).data('area');
                  field = $(this).data('field');
                  object = $(this).data('object');
                  console.log(object);
                  value = $(this).val();
                  content_areas[key].fields[subkey].name;
                  //content_areas[area].fields[field].value = value;
                  OBJECTNAME.updateContent(area, field, value)
                  OBJECTNAME.updateCanvas(wrapper);
              });
          }
      }
  
      container.append('&lt;a href="#" id="download--' + name +'" class="button download download--' + name + '"&gt;Download&lt;/a&gt;');
  
      $('body').on('click', '.download--' + name, function(e) {
          var dataURL = $('.canvas-temp--fb-banner canvas')[0].toDataURL('image/png');
          $(this).attr('download', 'test.png');
          document.getElementById('download--' + name).href = dataURL;
      });
  }
  
  Canvas_to_img.prototype = {
      updateContent: function(area, field, value){
          this.content_areas[area].fields[field].value = value;
      },
  
      updateCanvas: function(wrapper) {
          $('.canvas-temp--'+this.name+' canvas').remove();
          wrapper.layers[1].destroy();
  
          var textLayer = new Concrete.Layer();
          wrapper.add(textLayer);
  
          content_areas = this.content_areas;
  
          for (key in content_areas){
              textLayer.sceneCanvas.context.fillStyle = content_areas[key].colour;
              textLayer.sceneCanvas.context.font = "bold 24px Open Sans";
              textLayer.sceneCanvas.context.textAlign = content_areas[key].alignment;
              layer_content = '';
              for (subkey in content_areas[key].fields){
                  //console.log(content_areas[key].fields[subkey]);
                  layer_content += content_areas[key].fields[subkey].prepend + " ";
                  layer_content += content_areas[key].fields[subkey].value;
                  layer_content += content_areas[key].fields[subkey].append + " ";
                  //console.log(layer_content);
              }
              textLayer.sceneCanvas.context.fillText(layer_content, content_areas[key].position_x, content_areas[key].position_y);
          }
  
          //ctx.fillText($(this).val(), cnvs.width/2, 300);
          // textLayer.sceneCanvas.context.fillText('Test', 325, 300);
           var canvas = wrapper.toCanvas({
              pixelRatio: 1
          });
          //console.log(canvas.canvas);
          $('.canvas-temp--'+this.name).append(canvas.canvas);
      },
      update: function(){
  
      }
  };
  
  
  
  var content_areas = {
      1: {
          position_x: 425,
          position_y: 300,
          alignment: 'center',
          colour: '#fff',
          font: 'Open Sans',
          size: '24px',
          weight: 600,
          fields: {
              field_1: {
                  name: 'date',
                  value: '',
                  prepend: '',
                  append: ','
              }, 
              field_2: {
                  name: 'venue',
                  value: '',
                  prepend: '',
                  append: ''
              }
          }
      }
  }
  
  var content_areas_2 = {
      1: {
          position_x: 425,
          position_y: 300,
          alignment: 'center',
          colour: '#fff',
          font: 'Open Sans',
          size: '24px',
          weight: 600,
          fields: {
              field_1: {
                  name: 'date',
                  value: '',
                  prepend: '',
                  append: ','
              }, 
              field_2: {
                  name: 'venue',
                  value: '',
                  prepend: '',
                  append: ''
              },
              field_3: {
                  name: 'time',
                  value: '',
                  prepend: '',
                  append: ''
              }
          }
      }
  }
  
  var facebook_banner = new Canvas_to_img('fb-banner', $('.banner-container'), 'http://localhost:1234/images/mainsite5/bb-fb-cover.jpg', 315, 851, content_areas);
  var facebook_banner_2 = new Canvas_to_img('fb-banner-2', $('.banner-container-2'), 'http://localhost:1234/images/mainsite5/bb-fb-cover.jpg', 315, 851, content_areas_2);
  </code></pre>
  
  <p>These are the function calls that need to be associated with an object:</p>
  
  <pre><code>OBJECTNAME.updateContent(area, field, value)
  OBJECTNAME.updateCanvas(wrapper);
  </code></pre>
  
  <p>I probably need to instead make this eventlistener linked to the object itself? I'm not sure how do to that.</p>