Based on this javascript tutorial I wrote a simple animation as a test. It worked without any problems with Edge/IE 11, then I tried running it on Chrome and the canvas and the script will load and apparently work, but nothing is being shown on screen. No errors are being shown in the debugger either. I tried reinstalling Chrome but the problem persists. Can anybody explain me what's going on? Thanks in advance.
Here is a jsFiddle with the example, which doesn't load on chrome (at least for me)
// screen size variables
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight;
var canvas = document.createElement('canvas');
var c = canvas.getContext('2d');
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
var xpos=0,
ypos=0,
index=0,
numFrames = 30,
frameSize= 200;
// Add our drawing canvas
document.body.appendChild(canvas);
//load the image
image = new Image();
image.src = "http://dl.dropbox.com/u/1143870/sprite%20sheet/robot2.png";
image.onload = function() {
//we're ready for the loop
setInterval(loop, 1000 / 30);
}
function loop() {
//clear the canvas!
c.clearRect(0,0, SCREEN_HEIGHT,SCREEN_WIDTH);
/*our big long list of arguments below equates to:
1: our image source
2 - 5: the rectangle in the source image of what we want to draw
6 - 9: the rectangle of our canvas that we are drawing into
the area of the source image we are drawing from will change each time loop() is called.
the rectangle of our canvas that we are drawing into however, will not.
tricky!
*/
c.drawImage(image,xpos,ypos,frameSize,frameSize,0,0,frameSize, frameSize);
//each time around we add the frame size to our xpos, moving along the source image
xpos += frameSize;
//increase the index so we know which frame of our animation we are currently on
index += 1;
//if our index is higher than our total number of frames, we're at the end and better start over
if (index >= numFrames) {
xpos =0;
ypos =0;
index=0;
//if we've gotten to the limit of our source image's width, we need to move down one row of frames
} else if (xpos + frameSize > image.width){
xpos =0;
ypos += frameSize;
}
}
Update: Logging to Dropbox seems to fix the problem with the jsFiddle. This wasn't my actual question though, since my own version of it worked with a local file. I'll mark this as solved anyways.
