this is my exact code, a single html file. same folder has snake0 to 17 .png (animation). I want 18 canvases (I guess each needs a context, so 18 of those too). mainly so I can rotate them if facing down/up/left/right (you cant rotate an Image() apparently but can rotate a canvas. My problem is that I don't see any png on the screen with the 'array version' of the code. If u comment out the opposite stuff (non array version) I do see the png. It must be some stupid simple problem I'm unaware of, how hard can it possibly be to post a stupid png in an array on the screen? Well, it is javascript so probably in some obfuscated, tricky, counterintuitive way it might be possible, I guess. I mean, I could get a permanent marker and write this code on my bathroom wall. I'd call that bathroomscript, and right now bathroomscript and javascript have equal capability in producing a png on my screen with an array. Should I switch to bathroomscript? At least with that I can flush the toilet and use the sink handles, maybe those have some effect on getting results.
<!DOCTYPE html>
<title>png problem</title>
<meta charset="utf-8"/>
<canvas id="canvas" width="700" height="550" oncontextmenu="return false"></canvas>
<script>
function main(){
if (paused==false){
ctx.fillStyle='rgb(128,128,128)'
ctx.fillRect(0,0,canvas.width,canvas.height)
ctx2.fillStyle='rgb(255,255,255)'
ctx2.fillRect(0,0,canvas2.width,canvas2.height)
ctx2.drawImage(snakecans[1],0,0) //does not work with array (comment out the opposite line and block below when testing)
//ctx2.drawImage(snakecan,0,0) //does work (no array)
ctx.drawImage(canvas2,0,0,canvas2.width,canvas2.height, 5,5,canvas2.width,canvas2.height)
}
}
//does not work (comment out opposite block and line above when testing)
//can't see any png on screen
//i have 18 pngs. i want to put them in 18 'canvases' (so i guess i need 18 contexts too)
snakecans=[]
snakectxs=[]
for(i=0;i<18;i++){
snakecans.push(document.createElement('canvas'))
snakecans[i].width=60
snakecans[i].height=30
snakectxs.push(snakecans[i].getContext('2d'))
im=new Image()
im.src='snake'+String(i)+'.png'
im.onload=function(snakectxs,i){ //you apparently need this onload or the png wont load in time
snakectxs[i].drawImage(im,0,0)
}(snakectxs,i) //says 'snakectxs[i] is undefined' unless I put that stuff in parentheses
}
//does work
//can see png on screen
/*
snakecan=document.createElement('canvas')
snakecan.width=60
snakecan.height=30
snakectx=snakecan.getContext('2d')
im=new Image()
im.src='snake'+String(3)+'.png'
im.onload=function(){
snakectx.drawImage(im,0,0)
}
*/
canvas=document.getElementById('canvas')
ctx=canvas.getContext('2d')
canvas2=document.createElement('canvas')
canvas2.width=540
canvas2.height=540
ctx2=canvas2.getContext('2d')
paused=false
setInterval(main, 1000/60)
</script>