Question

When I try to draw an image to a Canvas element I get this exeption:

Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1
textureLoadedstaticsprite.js:14
StaticSpritestaticsprite.js:21
(anonymous function)

All both the CanvasRenderingContent and the HTMLImageElement exist.
I just don’t get it :S

Here is teh code I’m using:

    /**
  * 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();

And here is the GraphicsEntity base class, in case you need it 😛

/**
  * 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');

}

Answer 1

texture.addEventListener("load", textureLoaded(this.graphics), false);

This line tries to add the function returned by textureLoaded(this.graphics) as the event listener. The function returns undefined, so it doesn’t quite work out.

Try changing that line to

texture.addEventListener("load", textureLoaded, false);

and replacing the line

    function textureLoaded(context) {

With the lines

    var context = this.graphics;
    function textureLoaded() {