title: canvas new Image() from sprite
body: <p>I have written an script to animate some images using the <code>canvas.js</code> from <a href="http://www.clips.ua.ac.be/pages/pattern-canvas" rel="nofollow">http://www.clips.ua.ac.be/pages/pattern-canvas</a></p>
  
  <p>However, because my script tries to load about 20 images on pageload it takes at least 6 seconds for it to finally run, I would like to fix this by using a sprite.</p>
  
  <p>I would like to know how I can get a new <code>Image()</code> object from my sprite image (something like <code>new Image(xoffset, yoffset, width, height)</code>).</p>
  
  <p>Currently I am trying this:</p>
  
  <pre><code>images = [];
  
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 0, 0,   {  width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 180, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 360, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 540, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 729, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 900, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 1080, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 1260, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 1440, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 1620, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 1800, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 1980, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 2160, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 2340, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 2520, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 2700, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 2880, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 3060, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 3240, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 3420, 0,  { width: 180, height: 550, alpha: 1.0 } ));
  </code></pre>
  
  <p>However, despite the <a href="http://www.clips.ua.ac.be/pages/pattern-canvas#image" rel="nofollow">website (link)</a> showing that this should set the x/y coordinates of the image, when I use <code>console.log</code>(images) every image in the array still shows up as 0/0 instead of their respective values.</p>
  
  <p>When I move the x/y values inside the options array (inside the new <code>Image()</code> with width/height/alpha) the entire sprite gets squeezed to the width/height defined and displayed, the x/y values do show up in the <code>console.log</code> correctly though.</p>
  
  <p>I am very confused as to how this is supposed to work and hope someone can clarify this and help me.</p>