Shattering Image Using Canvas

I'm trying to shatter image to pieces using canvas , this is my code : var image = new Image(); image.src = 'koals.jpg'; image.onload = cutImageUp; var imagePieces = []; function

Solution 1:

Your problem is with the 50+"px" for canvas width and height, remove the +"px" part and your good.

From w3Specs:

The canvas element has two attributes to control the size of the coordinate space: width and height. These attributes, when specified, must have values that are valid non-negative integers.

var image = newImage();
image.src = 'koals.jpg';
image.onload = cutImageUp;

 var imagePieces = [];
functioncutImageUp() {

    for(var x = 0; x < 5; x++) {
        for(var y = 0; y < 5; y++) {
            var canvas = document.createElement('canvas');
            canvas.width = 50;
            canvas.height = 50;
            var context = canvas.getContext('2d');
            context.drawImage(image, x *50, y * 50, 50, 50, 0, 0, 50, 50);

           imagePieces.push(canvas.toDataURL());
        }
    }


    var anImageElement = document.getElementById('img');
    anImageElement.src = imagePieces[0];
}

jsfiddle