Adding Beads
Managed to add all the beads to the canvas for my interactive component. Also added a stylesheet to edit the background of the beading area.
Feels so cool that it works! I attempted to add an if statement to get it onto the next row but ended up more confused. Conceptually I'm sure its on track but I assume there should be other variables involved as how would 'iCanvas' know I'm telling it to asses the width?! And I'm sure it should be an if/else statement, not just an if. And they could possibly be two separate functions... Nevertheless, it went something like this:
function addBead (beadToDraw){
context.drawImage(beadToDraw, column*80, 0);
column++;
if(iCanvas>=600){
context.drawImage(beadToDraw, 0, row*80);
row+1;
};
}
Groovy :)! You almost got it. We can get away with just two variables columns and rows and because of this we don't really need to use canvas.width. So have a look at the following code and let me know what you think (have not tested but should work, next step will be to limit the rows as well):
ReplyDeletevar column = 0;
var row = 0;
function addBead (beadToDraw){
if(column>=8){
column = 0;
row ++;
}
context.drawImage(beadToDraw, column*80, row*80);
column++;
}