Drawing Images in Canvas not working properly - image

Question

I need help with canvas because of one problem that Im trying to solve for about a day. Here is part of code that I am testing.
var imgpos = 0;
function drawshape(context, shape, fill, bb) {
context.beginPath();
context.save();
context.translate( 0, 130);
context.scale(1, 0.65);
context.shadowOffsetX = 0;
context.shadowOffsetY = 10;
context.shadowBlur = 9;
context.shadowColor = "black";
context.arc(shape.x, shape.y, shape.r, shape.sa, shape.ea, shape.cc);
context.lineWidth = shape.lw;
// line color
context.strokeStyle = fill;
context.stroke();
context.restore();
// not working :( ---------------
context.save();
for(var lg = 0; lg < shape.ic; lg++) { //
var imagesel = new Image();
imagesel.src = '/images/themes/default/capsules/'+imgpos+'.png';
imagesel.onload = function(){
if(imgpos==0){xx=70;yy=320;}
if(imgpos==1){xx=120;yy=260;}
if(imgpos==2){xx=140;yy=320;}
if(imgpos==3){xx=160;yy=320;}
if(imgpos==4){xx=180;yy=320;}
if(imgpos==5){xx=200;yy=320;}
if(imgpos==6){xx=220;yy=320;}
if(imgpos==7){xx=240;yy=320;}
if(imgpos==8){xx=260;yy=320;}
context.drawImage(imagesel, xx, yy);
}
if(imgpos != 8){imgpos++;} else {imgpos=0;}
}
context.restore();
// till here :( ---------------
if(shape.link != 'Limited'){
context.save();
context.scale(1, 0.65);
context.translate(500,660);
context.font = "bold 15pt Arial";
context.fillStyle = "WHITE";
if(bb <= 2){
context.textAlign="right";
context.rotate((((shape.sa+shape.ea)-0.1)/2)-Math.PI);
context.fillText(shape.link, -170, 0);
}
if(bb > 2){
context.textAlign="left";
context.rotate((((shape.sa+shape.ea)+0.1)/2)-2*Math.PI);
context.fillText(shape.link, +170, 0);
}
context.restore();
}else{
context.save();
context.scale(1, 0.65);
context.translate( 0, 130);
context.textAlign="center";
context.font = "bold 15pt Arial";
context.fillStyle = "WHITE";
context.fillText(shape.link, shape.x, shape.y-10);
context.restore();
}
}
So this code (except of part not working) draws arcs in style of halfcircle, but each of them is separated and shaded etc... My problem is that I want to put pictures in all of them BUT not the same number of pictures (thats the reason for cycle <- must be right, tested and working with alert!...). In first should be one picture, in second two, in third one ... and finaly in ninth two. But if i try this code, pictures are all drowe on one place and all of them are changing position if this function runs... I dont know what to do with that..
Firstly I wanted to add them to the path (each of paths have link, but thats another function, working properly too), than I tryied to do it separated from that function but nothing worked for me. Important part of code is only not working part, averything else is working perfectly.
Thanks for help.

Answer 1

It looks like you're fooled by the infamous loop variable issue. JavaScript variables live per function, not per block. So, your imagesel / imgpos variables only exist once in fact, which means you only have one image at one location. The variable is overwritten each loop iteration.
You should wrap the appropriate loop code in a function to actually create separate variables. Also, you haven't declared xx / yy anywhere with var.
for(var lg = 0; lg < shape.ic; lg++) {
(function(imgpos) {
var imagesel = new Image();
imagesel.src = '/images/themes/default/capsules/'+imgpos+'.png';
imagesel.onload = function(){
if(imgpos==0){xx=70;yy=320;}
if(imgpos==1){xx=120;yy=260;}
if(imgpos==2){xx=140;yy=320;}
if(imgpos==3){xx=160;yy=320;}
if(imgpos==4){xx=180;yy=320;}
if(imgpos==5){xx=200;yy=320;}
if(imgpos==6){xx=220;yy=320;}
if(imgpos==7){xx=240;yy=320;}
if(imgpos==8){xx=260;yy=320;}
context.drawImage(imagesel, xx, yy);
}
})(imgpos);
if(imgpos != 8){imgpos++;} else {imgpos=0;}
}