Не работает цикл рисования canvas

Question

Мне необходимо заполнить изображениями canvas. Однако он пуст.
Код:

document.body.innerHTML += "<canvas id='canvas' width=100 height=40></canvas>";

var cnv = document.getElementById("canvas");
var ctx = cnv.getContext("2d");
var pic = [
["test.png","test1.png","test2.png","test.png","test3.png"],
["test6.png","test7.png","test4.png","test.png","test1.png"],
];
var size = 20;

for(var i = 0; i < cnv.width / size; i++){
        for(var j = 0; j < cnv.height / size; j++){
                var img = new Image();
                img.src = pic[i][j];
                ctx.drawImage(img, i * size, j * size, size, size);
        }
}

Answer 1

Надеюсь помог, удачки

document.body.innerHTML += "<canvas id='canvas' width=300 height=200></canvas>";

var cnv = document.getElementById("canvas");
var ctx = cnv.getContext("2d");
var pic = "http://31.media.tumblr.com/tumblr_mdmeux7p191r4ugi5o1_250.gif",
  size = 20;
var img = new Image();
img.src = pic;
img.onload = drawImageActualSize;

function drawImageActualSize() {
  for (var i = 0; i < (cnv.width / size); i++) {
    for (var j = 0; j < (cnv.height / size); j++) {
      ctx.drawImage(img, i * size, j * size, size, size);
    }
  }
}

БЛОГ НА HUSL

Не работает цикл рисования canvas

Ответы (1 шт):