Databases
StackOverflow2013
Postsdbo
POCanvas drawing error
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCanvas drawing error
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdavin
    1. USJon Koops
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COcould you show us the html? when and how do you call 'textureLoaded'? where are alls the args or default args being used or called if you set parameters inside the drawimage? where exactly are you calling the canvas element? setting the 2d context etc?
      singulars
      1. POCanvas drawing error
      1. USalonisser
    2. COI haven't looked properly at your code although it looks like your `texture.addEventListener` line is wrong. You're calling the function there, not sending it in as a handler. You might try currying or binding. In your current version the handler sent is `undefined` because that's the return value of the function.
      singulars
      1. POCanvas drawing error
      1. USdavin
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload