title: jQuery/Javascript - Run function before (document).ready for the purpose of loading an image
body: <p>I am trying to get the dimensions of an image in order to resize (or size) a canvas of it's length with twice the width. (So, for a 400x800 image I want a 800x800 canvas). What I'm trying to do right now is load the image twice, once to determine it's size and another time to display it. My HTML w/ Javascript/JQuery looks like </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Canvas from scratch&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="jcanvas.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;canvas id="myCanvas" width="1100" height="500"&gt;
          &lt;/canvas&gt;
      &lt;script&gt;
  
          $("&lt;img /&gt;").attr("src", "test1image.jpg").load(function() {
              /* This is where I'd like to load the image to get its dimensions */
          });
  
          $(document).ready(
                  function() {
  
  
                      var imgWidth, imgHeight;
                      var imageData; 
  
                      var image = new Image();
                      var canvas = document.getElementById("myCanvas");
                      var ctx = canvas.getContext("2d");
  
                      $(image).load(function() {
                          /* This is where the image is loaded and 
                             inserted into the canvas */
                          ctx.drawImage(image, 0, 0);
                      });
                      image.src = "test1image.jpg"; 
  
                      imageData = ctx.getImageData(0, 0,
                              image.width,
                              );
  
                      /* This is just part of the image manipulation, 
                         bland right now */
                      var newImgData = ctx.createImageData(imageData.width,
                              imageData.height);
                      for ( var i = 0; i &lt; newImgData.data.length; i += 4) {
                          newImgData.data[i + 0] = 255;
                          newImgData.data[i + 1] = 0; 
                          newImgData.data[i + 2] = 0; 
                          newImgData.data[i + 3] = 255;       
                      }
                      ctx.putImageData(newImgData, imageData.width, 0);
  
                  });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>One thing I've kept trying but noticed is not working is trying to place the function before (document).ready, but if the (document).ready call always comes first. I can't seem to get the image to load without the canvas already being created (because it is in the (document).ready call). Can anyone explain what's going on? </p>
  
  <p>Thanks. </p>
  
  <p>Edit_1: I just tried adding </p>
  
  <pre><code>jQuery(window).load(function() {
              $("&lt;img /&gt;").attr("src", "test1image.jpg").load(function() {
                  imgWidth = this.width;
              });
          });
  </code></pre>
  
  <p>to the top of the script, but imgWidth is being declared as undefined in (document).ready.</p>
  
  <p>Edit_2: So, that actually worked really well blgt. Here's the new code, and it's 100% functional. The new canvas size is exactly what I wanted, based on the image dimensions and it all works... only thing I'm thinking is that there might be one too many nested functions but I'll try to work that out on my own. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Canvas from scratch&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="jcanvas.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;canvas id="myCanvas" width="1100" height="500"&gt;
          &lt;/canvas&gt;
      &lt;script&gt;
          $(document).ready(
                  function() {
                      $("&lt;img&gt;").attr("src", "test1image.jpg").on('load', function() {
                          var imgWidth, imgHeight;
                          var imageData; 
                          var image = new Image();
                          var canvas = document.getElementById("myCanvas");
                          var ctx = canvas.getContext("2d");
                          ctx.canvas.width = this.width * 2;
                          ctx.canvas.height = this.height; 
                          $(image).on("load", function() {
                              /* This is where the image is loaded and 
                                 inserted into the canvas */
                              ctx.drawImage(image, 0, 0);
  
                          });
                          image.src = "test1image.jpg"; 
  
                          imageData = ctx.getImageData(0, 0,
                                  this.width,
                                  this.height);
  
                          /* This is just part of the image manipulation, 
                             bland right now */
                          var newImgData = ctx.createImageData(imageData.width,
                                  imageData.height);
                          for ( var i = 0; i &lt; newImgData.data.length; i += 4) {
                              newImgData.data[i + 0] = 255;
                              newImgData.data[i + 1] = 0; 
                              newImgData.data[i + 2] = 0; 
                              newImgData.data[i + 3] = 255;       
                          }
                          ctx.putImageData(newImgData, imageData.width, 0);
                   });
                  });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>