Canvas java problem Opcje

[korgan]

Kod

for(i=0;i<json[3][0];i++){
document.getElementById("left_produkt_in").innerHTML += '<canvas class ="canvas_l"id="Id' + i +'" width="200" height="250" style="border:1px solid black;"></canvas>';

var dane = 'Id' + i;

var canvas = document.getElementById(dane);
      var context = canvas.getContext('2d');
context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, 200, 250);
      var imageObj = new Image();


      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = json[0][i];



        }

Mam problem posiadając taki kod jak powyżej który generuje canvas i wrzuca do niego obrazek .
Po wykonaniu tego kodu nie działa poprawnie tak jak myślałem znaczy się obrazek zostaje wrzucony tylko do ostatniego canvas i nie wiem dlaczego tak się dzieje.
kod był sprawdzany w chromie

[Comandeer]

Bo w chwili, gdy obrazek się wczytuje, zmienna context wskazuje na ostatnie canvas w pętli. Powinieneś sobie zrobić ładne IIFE:

Kod

for(var i = 0; i < costam; ++i)
{
    (function(i)
    {
        var itd;
    ](i));
}

[korgan]

Bo w chwili, gdy obrazek się wczytuje, zmienna context wskazuje na ostatnie canvas w pętli. Powinieneś sobie zrobić ładne IIFE:

Kod

for(var i = 0; i < costam; ++i)
{
    (function(i)
    {
        var itd;
    ](i));
}

Pomogło po części znaczy się musiałem stworzyć drugą pętle która wykonuje IIFE i teraz działa gdy dorzucam IIFE do pierwszej pętli nie działa wiesz może dlaczego?

Kod

    document.getElementById("left_produkt_in").innerHTML = '';

for(i=0;i<json[3][0];i++){

    document.getElementById("left_produkt_in").innerHTML += '<canvas class ="canvas_l"id="Id' + i +'" width="200" height="250" style="border:1px solid black;"></canvas>';


(function(i)
    {
        
var dane = 'Id' + i;

var canvas = document.getElementById(dane);
      var context = canvas.getContext('2d');
context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, 200, 250);
      var imageObj = new Image();
      

      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = json[0][i];





    }(i));

      
        }

for(z=0;z<json[3][0];z++){

  


(function(z)
    {
        
var dane = 'Id' + z;

var canvas = document.getElementById(dane);
      var context = canvas.getContext('2d');
context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, 200, 250);
      var imageObj = new Image();
      

      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = json[0][z];





    }(z));

      
        }





}