I am encountering an issue with a JSON array that I'm receiving from PHP. The array is indexed and has the following format (larger in real scenario)
[
[
[17, 28, 1, "z"],
[28, 31, 6, "b"],
[8, 29, 6, "b"]
],
[
[19, 28, 1, "z"],
[17, 25, 6, "b"],
[19, 25, 6, "b"],
[27, 32, 6, "b"],
[9, 28, 6, "b"]
]
]
When trying to process this json array, I encounter an error when passing values into the drawImage parameters. The console shows the following message:
TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.
alert(typeof data); //object
$(document).ready(function() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
r = new Image()
r.src = 'graphics/redsprites.png';
image2 = new Image()
image2.src = 'graphics/pitch.png';
b = new Image()
b.src = 'graphics/bluesprites.png';
z = new Image()
z.src = 'graphics/zoxball.png';
var nextFrame =0;
var m;
foo(function(data) {
alert(typeof data);
var draw = function(){
ctx.clearRect(0, 0, 1080, 1680);
ctx.drawImage(image2, 0, 0, 622, 924, 0, 0, 1080, 1680);
if (nextFrame<=10){
for(m = 0; m <=22; m++)//23 is 22 players plus ball
{
alert(m);
alert(nextFrame);
alert(data[nextFrame][m][0]);
alert(data[nextFrame][m][1]);
alert(data[nextFrame][m][3]);
ctx.drawImage(data[nextFrame][m][3], 0, 0, 100, 100, data[nextFrame][m][0], data[nextFrame][m][1], 25, 25);
}
}else{
clearTimeout(draw);
}
nextFrame++;
}
setInterval(draw,1000);
});
function foo(callback) {
$.ajax({
type: "POST",
url: "matchEngine.php",
success:function(data) {
for (var i = 0, len= data.length;i <len; i++) {
for ( h = 0, len2= data[i].length;h <len2; h++) {
//alert("am here!!");
data[i][h][0]=(data[i][h][0])*30;
data[i][h][1]=(data[i][h][1])*30;
data[i][h][3]=data[i][h][3].replace(/\"/,"");
}
}
callback(data);
}
});
}
});
Why are the parameters for the drawImage not working??