I have this code and in Firefox is working well, but in Chrome I’am getting this error:
“Uncaught Error: INVALID_STATE_ERR: DOM Exception 11” at sprites.js:36
on that line is this code:
context.drawImage(
Context is a global variable in which contains 2d context of canvas. Here is full code:
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="sprites.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="prototypes.js"></script>
<script type="text/javascript" src="initialize.js"></script>
</head>
<body onload="initialize()">
</body>
</html>
sprites.js
function SpritePrototype(frames, width, height, type)
{
this.frames = frames;
this.type = type;
if (this.frames > 0) {
this.frameArray = new Array(this.frames);
for (var i = 0; i < this.frames; i++) {
this.frameArray[i] = document.createElement("canvas");
}
}
}
function Sprite()
{
this.id = 0;
this.prototype = 0;
this.next = 0;
this.prev = 0;
this.x = 0;
this.y = 0;
this.startFrame = 0;
this.currentFrame = 0;
}
Sprite.prototype.draw = function()
{
if (this.prototype == 0) {
return;
}
if (context.drawImage) {
if (this.prototype.frames > 0) {
context.drawImage(
this.prototype.frameArray[this.currentFrame],
Math.round(this.x),
Math.round(this.y)
);
}
}
}
game.js
function Game()
{
this.frameLength = 1000/30;
this.startTime = 0;
this.sprites = 0;
}
Game.prototype.resetTime = function()
{
var d = new Date();
this.startTime = d.getTime();
delete d;
}
Game.prototype.addSprite = function(prototype)
{
currentId++;
if (this.sprites == 0) { // if creating the first sprite
this.sprites = new Sprite();
this.sprites.id = currentId;
this.sprites.prototype = prototype;
} else {
var tempSprite = this.sprites; // temporarily store the first sprite
while (tempSprite.next != 0) { // while not the last sprite
tempSprite = tempSprite.next; // shift to next one
}
tempSprite.next = new Sprite(); // next sprite to the last sprite
tempSprite.next.id = currentId;
tempSprite.next.prototype = prototype;
tempSprite.next.next = 0; // the last sprite, or the last one in the space
tempSprite.next.prev = tempSprite;
}
}
Game.prototype.loop = function()
{
var tempSprite;
var currentTime;
var globalFrame;
var oldFrame;
var d = new Date();
currentTime = d.getTime();
delete d;
globalFrame = Math.floor((currentTime - this.startTime)/this.frameLength);
canvas.width = canvas.width;
tempSprite = this.sprites;
while (tempSprite != 0) {
if (tempSprite.frames > 0) {
oldFrame = tempSprite.currentFrame;
tempSprite.currentFrame = globalFrame;
}
tempSprite.draw();
tempSprite = tempSprite.next;
}
}
prototypes.js
var protoPlayer;
function createPrototypes()
{
var tempCtx;
var i;
protoPlayer = new SpritePrototype(5, 20, 30, "player");
for (i = 0; i < protoPlayer.frames; i++) {
protoPlayer.frameArray[i].width = protoPlayer.width;
protoPlayer.frameArray[i].height = protoPlayer.height;
tempCtx = protoPlayer.frameArray[i].getContext("2d");
tempCtx.strokeStyle = "rgb("+ i * 50 +", 0, 0)";
tempCtx.beginPath();
tempCtx.moveTo(0, 0);
tempCtx.lineTo(20, 30);
tempCtx.stroke();
}
}
initialize.js
var game;
var canvas;
var context;
var currentId;
function initialize()
{
canvas = document.createElement("canvas");
canvas.width = 640;
canvas.height = 480;
canvas.setAttribute("style", "background:#060606;");
document.body.appendChild(canvas);
context = canvas.getContext("2d");
createPrototypes();
currentId = 0;
game = new Game();
game.addSprite(protoPlayer);
game.loop();
}
Seems to me that that error is happening because you are calling drawImage with a HTMLCanvasObject who’s height or width is zero. From the latest canvas 2d context spec:
http://dev.w3.org/html5/2dcontext/#images
Hope this helps.