Having trouble with drawing an image to a Canvas element and encountering this error:
Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1
textureLoadedstaticsprite.js:14
StaticSpritestaticsprite.js:21
(anonymous function)
Despite having both the CanvasRenderingContent and HTMLImageElement, I'm still puzzled.
This is the code in question:
/**
* Class for rendering static sprites such as 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();
Also included is the base class GraphicsEntity for reference:
/**
* Class for presentation of graphical objects.
*/
function GraphicsEntity(args) {
// Private Fields
var x = 0;
var y = 0;
var z = 0;
var width = 0;
var height = 0;
// Public Fields
this.DOMElement = null;
this.graphics = null;
this.name = "";
// Properties
Object.defineProperty(this, "alpha", {
get: function() { return parseFloat(this.DOMElement.style.opacity); },
set: function(value) { this.DOMElement.style.opacity = value; }
});
Object.defineProperty(this, "height", {
get: function() { return height; },
set: function(value) {
height = value;
this.DOMElement.setAttribute("height", height);
}
});
Object.defineProperty(this, "width", {
get: function() { return width; },
set: function(value) {
width = value;
this.DOMElement.setAttribute("width", width);
}
});
Object.defineProperty(this, "x", {
get: function() { return x; },
set: function(value) {
x = value;
this.DOMElement.style.left = Math.ceil(x) + "px";
}
});
Object.defineProperty(this, "y", {
get: function() { return y; },
set: function(value) {
y = value;
this.DOMElement.style.top = Math.ceil(y) + "px";
}
});
Object.defineProperty(this, "z", {
get: function() { return z; },
set: function(value) { this.DOMElement.style.zIndex = parseInt(value); }
});
// Constructor
// Get constructor values or use defaults
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 position
this.DOMElement.style.position = "absolute";
this.DOMElement.style.left = x + "px";
this.DOMElement.style.top = y + "px";
this.DOMElement.style.zIndex = z;
this.DOMElement.width = width;
this.DOMElement.height = height;
// Set opacity
this.DOMElement.style.opacity = 1;
// Get 2d canvas context
this.graphics = this.DOMElement.getContext('2d');
}