title: Canvas drawing error
body: <p>When I try to draw an image to a Canvas element I get this exeption: </p>
  
  <blockquote>
    <p>Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1<br>
    textureLoadedstaticsprite.js:14<br>
    StaticSpritestaticsprite.js:21<br>
    (anonymous function)</p>
  </blockquote>
  
  <p>All both the CanvasRenderingContent and the HTMLImageElement exist.
  I just don't get it :S</p>
  
  <p>Here is teh code I'm using:</p>
  
  <pre><code>    /**
    * Class for drawing static sprites, like trees and blocks
    */
  
  function StaticSprite(args) {
  
      // Private Fields
      var texture = new Image();
  
      // Events
      function textureLoaded(context) {
          console.log(context);
          console.log(texture);
          context.drawImage(texture, 0, 0, 32, 32);
  
      }
  
      // Constructor
  
      // Add event listeners
      texture.addEventListener("load", textureLoaded(this.graphics), false);
  
      // Load texture
      texture.src = "img/assets/wall1.png";
  
      if(args != undefined) {
  
          // Set local fields
          this.x = args.x || this.x;
          this.y = args.y || this.y;
          this.z = args.z || this.z;
          this.width = args.width || this.width;
          this.height = args.height || this.height;
  
      }
  
      this.width = 32;
      this.height = 32;
  
  }
  
  // Inherit from GraphicsEntity
  StaticSprite.prototype = new GraphicsEntity();
  </code></pre>
  
  <p>And here is the GraphicsEntity base class, in case you need it :P</p>
  
  <pre><code>/**
    * Class for presentation of graphical objects.
    */
  
  function GraphicsEntity(args) {
  
      // Private Fields
      var x = 0; // The X-position of the GraphicsEntity relative to it's parent container
      var y = 0; // The Y-position of the GraphicsEntity relative to it's parent container
      var z = 0; // The Z-position of the GraphicsEntity relative to it's parent container
      var width = 0; // The width of the GraphicsEntity
      var height = 0; // The height of the GraphicsEntity
  
      // Public Fields
      this.DOMElement = null; // Reference to the corresponding HTML Element
      this.graphics = null; // The 2D context for rendering 2D onto the element.
      this.name = ""; // The name of the GraphicsEntity
  
      // Properties
      // The Alpha or transparency value of the GraphicsEntity, 1 is completely opaque, 0 is completely transparent.
      Object.defineProperty(this, "alpha", {
  
          get: function() { return parseFloat(this.DOMElement.style.opacity); },
          set: function(value) { this.DOMElement.style.opacity = value; }
  
      });
  
      // The height of the GraphicsEntity
      Object.defineProperty(this, "height", {
  
          get: function() { return height; },
          set: function(value) {
  
              height = value; // Set internal width
              this.DOMElement.setAttribute("height", height); // Set DOMElement width
  
          }
  
      });
  
      // The width of the GraphicsEntity
      Object.defineProperty(this, "width", {
  
          get: function() { return width; },
          set: function(value) {
  
              width = value; // Set internal width
              this.DOMElement.setAttribute("width", width); // Set DOMElement width
  
          }
  
      });
  
       // The X-position of the GraphicsEntity relative to it's parent container
      Object.defineProperty(this, "x", {
  
          get: function() { return x; },
          set: function(value) {
  
              x = value; // Set internal X-axis
              this.DOMElement.style.left = Math.ceil(x) + "px"; // Set DOMElement X-axis
  
          }
  
      });
  
      // The Y-position of the GraphicsEntity relative to it's parent container
      Object.defineProperty(this, "y", {
  
          get: function() { return y; },
          set: function(value) {
  
              y = value; // Set internal Y-axis
              this.DOMElement.style.top = Math.ceil(y) + "px"; // Set DOMElement Y-axis
  
          }
  
      });
  
      // The Z-position of the GraphicsEntity relative to it's parent container
      Object.defineProperty(this, "z", {
  
          get: function() { return z; },
          set: function(value) { this.DOMElement.style.zIndex = parseInt(value); }
  
      });
  
      // Constructor
  
      // Get constructor values of use default
      if(args) {
  
          x = args.x || x;
          y = args.y || y;
          z = args.z || z;
          width = args.width || width;
          height = args.height || height;
  
      }
  
      // Create a new canvas element
      this.DOMElement = document.createElement('canvas');
  
      // Set postion
      this.DOMElement.style.position = "absolute"; // Positioning style
      this.DOMElement.style.left = x + "px"; // X-axis
      this.DOMElement.style.top = y + "px";  // Y-axis
      this.DOMElement.style.zIndex = z; // Z-Axis
      this.DOMElement.width = width;
      this.DOMElement.height = height;
  
      // Set opacity/alpha
      this.DOMElement.style.opacity = 1;
  
      // Get 2d canvas context
      this.graphics = this.DOMElement.getContext('2d');
  
  }
  </code></pre>