title: TypeError: Cannot read property 'width' of undefined
body: <p>I'm trying to write a small piece of javascript (p5.js) so I can drag in an image from my desktop into the browser. Then using my mouse cursor X&amp;Y I can distort the image. I had this code working previously by just simply loading the image, but now I wish to have some interactive element with it so the user can load any image they want and apply the same effect.</p>
  
  <pre class="lang-javascript prettyprint-override"><code>var c;
  var slice;
  var sliceCount;
  var sliceWidth;
  var sliceWidthChecker;
  
  function setup(){
  var c = createCanvas(500,500);
  background(51);
  fill(255);
  c.drop(gotFile);
  }
  
  function dropped() {
  background(0);
  }
  
  function gotFile(file){
  var img = createImg(file.data).hide();
  image(img, 0, 0, 500, 500);
  console.log(img)
  noStroke();
  stroke(0);
  fill(255);
  text(file.name, 20, 60);
  text(file.size+' bytes', 20, 110);
  }
  
  function draw(){
  /* setting the sliceWidth */
  sliceWidth=windowWidth/12;
  
  /* setting the how many slice on the canvas depending on the sliceWidth
  */
  var maxSliceCount = windowWidth/sliceWidth;
  
  /* this is trying to control, if the get pixel reads beyond the image,    
  it goes back, but didn't work.*/
  if (sliceWidth &gt;= c.width) {
   sliceWidthChecker = sliceWidth - c.width;
   } else {
     sliceWidthChecker = sliceWidth;
   }        
  
  /* drawing the slices */ 
  for (sliceCount = 0; sliceCount &lt; maxSliceCount; sliceCount++) {
  /* sliceWidthChecker is trying to fix if get pixel reads beyond the        
  image, didn't work, can be replace by simply "sliceWidth" */   
  /* *0.5 after mouseX is to help if the mose move too much */
  slice = c.get(mouseX*0.5+sliceCount*40, 0, sliceWidthChecker,    
  c.height);
  image(slice, sliceWidth*sliceCount, windowHeight/10, slice.width,     
  slice.height);
  }
  }
  </code></pre>