Для спрайтов есть парсер!
https://github.com/Solovei95/apngjng.../imagetools.js
var big = new Image();
big.src = "image.jpg";
big.onload = function(){
var imgs = parseSprite(big,{
row:2,
cell:2,
width:100,
height:100,
sizeMode:0,
paddingLeft:0,
paddingTop:0
});
}
Режем:
Таблица 2х2, размер кусков 100х100, сдвиг таблицы 0х0
Так что тупо:
ctx.drawImage(imgs[0],0,0);
ctx.drawImage(imgs[1],100,0);
ctx.drawImage(imgs[2],0,100);
ctx.drawImage(imgs[3],100,100);
Все куски являются Canvas элементами, но их можно рисовать в drawImage.
Если сделать sizeMode:1 то размер кусков будет зависить от размера самой таблицы
Если sizeMode:0 то размер таблицы зависит от размера кусков