copy only a part of a canvas using context.putImageData()

I am trying to fill a canvas iteratively piece by piece. Moreover, I want an the canvas to be filled in iteratively with squares of the original image.

For performance reasons, I first render the original image to an offscreen canvas and then get the imagedata using getImageData().

In the onscreen canvas, I then try to iteratively plot the pieces using the following code:

        var x = 0;
        var y = 0;
        for (var i = 0; i <= (nbPiecesHorizontal*nbPiecesVertical-1); i++) {

            onscreenContext.putImageData(
                offScreenData.imageData, 
                x*pieceWidth, 
                y*pieceHeight, 
                x*pieceWidth, 
                y*pieceHeight, 
                pieceWidth, 
                pieceHeight);


            // iter
            x = x + 1;
            if (x == (nbPiecesHorizontal)) {
                x = 0;
                y = y +1;
            }
        };

However, I only get that a couple of pieces are drawn, more specific only the pieces in the corners. I want off course, all pieces to be drawn. How can I solve this?