I've managed to load an image to my canvas element successfully in Safari. It behaves normally, and I'm able to move it about the canvas as intended. However, when testing in either Firefox, Chrome or IE, the image will load, but as soon as I press a key to move it, the image disappears.
I had looked at Image drawn on canvas not displayed in Google Chrome and thought the Accelerated 2D feature might be causing it to not be drawing correctly too, but this was already disabled. I'm really not sure what could be causing the problem?
Edit: I had the following error from the console too: "Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. checkForCollision drawFrame"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> My title </title>
</head>
<h2>Your current time:</h2>
<h1>
<label class="timer" id="minutes">00</label>:<label id="seconds">00
</label>
</h1>
<body>
<section>
<canvas id="canvas"> </canvas>
<img id="sprite" src="http://i.imgur.com/dudnUyL.png">
<div>
<h3><button id="resetme" onclick="loadHard()">Reload Maze</button></h3>
</div>
<script type="text/javascript">
var canvas;
var context;
var x = 0;
var y = 0; //positioning of the sprite
var dx = 0;
var dy = 0; //momentum of the sprite at start
window.onload = function() {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
//ctx.save();
drawMaze("http://i.imgur.com/Fbhw8NT.png", 268, 225);
window.onkeydown = processKey;
};
var timer;
function drawMaze(mazeFile, Xstart, Ystart) {
clearTimeout(timer);
dx = 0;
dy = 0; //if the sprite is already moving, stop it
var imgMaze = new Image();
imgMaze.onload = function() {
canvas.width = imgMaze.width;
canvas.height = imgMaze.height;
context.drawImage(imgMaze, 0,0);
x = Xstart;
y = Ystart;
var imgSprite = document.getElementById("sprite");
context.drawImage(imgSprite, x, y);
context.stroke();
timer = setTimeout(drawFrame, 10);
};
imgMaze.src = mazeFile;
}
function processKey(e) { //e needs to be used for event handling
dx = 0;
dy = 0;
//condition for the Up arrow being pressed
if (e.keyCode == 38) {
dy = -1;
}
//condition for the Left arrow being pressed
if (e.keyCode == 37) {
dx = -1;
}
//condition for the Down arrow being pressed
if (e.keyCode == 40) {
dy = 1;
}
//condition for the Right arrow being pressed
if (e.keyCode == 39) {
dx = 1;
}
//all of the above numbers from 37-40 are representative of ASCII values
}
function checkForCollision() {
var imgData = context.getImageData(x-1, y-1, 15+2, 15+2);
var pixels = imgData.data;
for (var i = 0; n = pixels.length, i < n; i += 4) {
var red = pixels[i];
var green = pixels[i+1];
var blue = pixels[i+2];
var alpha = pixels[i+3];
//now check for the black pixels for a wall
if (red == 0 && green == 0 && blue == 0) {
return true;
} //checks for a greyish colour - possibly the edge of a wall
if (red == 169 && green == 169 && blue == 169) {
return true;
}
}
return false; //there was no collision
}
function drawFrame() {
if (dx != 0 || dy != 0) {
context.beginPath();
context.fillStyle = "rgb(254,244,207)";
context.rect(x, y, 15, 15);
context.fill()
x += dx;
y += dy;
if (checkForCollision()) {
x -= dx;
y -= dy;
dx = 0;
dy = 0;
}
var imgSprite = document.getElementById("sprite");
context.drawImage(imgSprite, x, y);
if (y > (canvas.height - 17)) {
alert("You succeeded - hooray! That, or Pi's done..");
clearInterval(timeout);
minutesLabel.innerHTML = secondsLabel.innerHTML = "00";
location.reload();
return;
}
}
timer = setTimeout(drawFrame, 10);
}
function loadHard() {
drawMaze('http://i.imgur.com/Fbhw8NT.png', 268, 225);
console.log('idle');
totalSeconds = -1;
setTime();
}
//just some more JS code about a timer
</script>
</section>
</body>
</html>
