js canvas drawImage not working with loop variable

Question

I'am trying to load an image on some criteria into a canvas but the image is loaded only when I give a constant as parameters for the drawImage() (drawImage with constant commented) function.I can add as many copy of the image to canvas as I want as long as I use constants as parameters.What's wrong with my code?Please help..

Here's the code:
JS:

 slotSize=50px;
    playArea=9;
    var grid=[];

    function renderGrid(grid)
    {
        for(var i=0,y=0;i<playArea;i++,y+=slotSize)
        {
            for(var j=0,x=0;j<playArea;j++,x+=slotSize)
            {
                ctx.fillStyle=grid[i][j];
                if(grid[i][j]=="white")
                {
                    grass=new Image();
                    grass.onload=function()
                    {
                        //console.log(x+","+y);
                        ctx.drawImage(grass,x,y,slotSize-2,slotSize-2);
                        //ctx.drawImage(grass,0,0,slotSize-2,slotSize-2); works!                 
                    }
                    grass.src="../assets/grass.jpg";
                }
                else
                {
                    ctx.fillRect(x,y,slotSize,slotSize);
                }
                ctx.strokeRect(x,y,slotSize,slotSize);
            }

        }
    }

    window.onload=function loadLocal()
    {
        canvas=document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        for(var i=0;i<playArea;i++)
        {
            grid[i]=[];
        }
        for(var i=0;i<playArea;i++)
        {
            for(var i=j;i<playArea;i++)
            {
                grid[i][j]="white";
            }
        }
        renderGrid();
    }

HTML:

<canvas id="canvas" width="450" height="450">
                            Your browser does not support the canvas element.

Possible duplicate of [Javascript infamous Loop issue?](http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue) — Andreas, Feb 06 '16 at 14:41
No? Those answers in the linked dup explain pretty well what is going on in your code. If you're going to write JS code in the future, you better study the given examples very carefully, and understand the solution. Closures are one of the basic features in JS, and you must know, how to use them. Just copy-pasting some given code fitted exactly to your issue won't carry you far... — Teemu, Feb 07 '16 at 09:19
Okay I went through the answers a little more patiently this time and I think I get it.Thanks :) — Sidwa, Feb 07 '16 at 13:56

score 0 · Accepted Answer · answered Feb 06 '16 at 15:23

http://plnkr.co/edit/h6H3UN45sS6mxtQHlLUz?p=preview

So basically you want to learn more about context and scopes for variables first. Then you want to learn more about Even Listeners and how to communicate in asynchronous environment.

Questions and comments are welcome!

var slotSize=50;
var playArea=9;
var grid=[];
var canvas, ctx;
var grass=new Image();


function renderGrid()
{
    for(var i=0,y=0;i<playArea;i++,y+=slotSize)
    {
        for(var j=0,x=0;j<playArea;j++,x+=slotSize)
        {
            var value = grid[i][j];
            ctx.fillStyle = value;
            if(grid[i][j]=="white")
            {
              console.log(x,y);
              ctx.drawImage(grass,x,y,slotSize-2,slotSize-2);
            }
            else
            {
                ctx.fillRect(x,y,slotSize,slotSize);
            }
            ctx.strokeRect(x,y,slotSize,slotSize);
        }

    }
}

window.onload=function loadLocal()
{
    canvas=document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    for(var i=0;i<playArea;i++)
    {
      grid[i]=[];
      for(var j=i;j<playArea;j++)
      {
          grid[i][j]="white";
      }
    }

    grass.onload = renderGrid;
    grass.src = "http://images.clipartpanda.com/grass-clipart-grass-md.png";
}

DAMN! I tried your solution it didn't work in my original code but then I refactored my code around yours and BAM it's working.Which is really wierd. I would really appreciate it if you could explain what exactly did you do? — Sidwa, Feb 06 '16 at 16:08
@Sidwa what do you mean it didn't work? Have you seen the link on top of my post? — Eugene Hauptmann, Feb 06 '16 at 17:08
I said your code is working but for some mysterious reason the business end of your code(the part which solved my problem) wasn't working in the actual program.So I remade my actual program around your code and it worked.Also I would appreciate it if you could explain the difference between my code and yours. Thanks :) — Sidwa, Feb 07 '16 at 08:09

js canvas drawImage not working with loop variable

1 Answers1