Тайлы

Тайл — картинка, в которой содержится несколько текстур для формирования различных картинок. Широко используется в разработке игр.

Пример тайла

Слово «тайл» произошло от английского слово «tile» — «плитка».

Тайлы добавляются в Canvas также, как и обычная картинка, только через дополнительные параметры указываются координаты нужной части картинки.

Пример формирования картинки на основе тайла.

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");

// Сначала создаётся объект Image (загружается тайл)
var img = new Image();
img.src = "https://know-online.com/examples/tiles.jpg";

// карта
var map = [
    [0,0,0,0,0],
    [0,1,1,0,0],
    [0,0,1,0,0],
    [0,0,1,1,0],
    [0,0,0,0,0]
];

// размер одного тайла
var tileSize = 64;

// подставление тайла в зависимости от числа в переменной «map»
var tiles = {
    0: [64,64],
    1: [128, 128]
};

// После загрузки тайла, в Canvas генерируется картинка
img.onload = function(){
    for (var i=0,l=map.length; i<l; i++) {
        var posY = 64 * i;
        for (var j=0,jl=map[i].length; j<jl; j++) {
            var posX = 64 * j;
            ctx.drawImage(img, tiles[map[i][j]][0], tiles[map[i][j]][1], tileSize, tileSize, posX, posY, tileSize, tileSize);
        }
    }
}

Пример кода на JSFiddle