Save() and Restore() function not working?

Question

(function (canvasID, imgID) {
    "use strict";

    var canvas, ctx, myImg;  

    var initialize = function (){

        canvas = document.getElementById(canvasID);
        myImg = document.getElementById(imgID);
        ctx = canvas.getContext('2d');


    };

    var renderImg = function (x, y, w, h, img, mixImg, filter){

        if(ctx) {
            ctx.drawImage(img, x, y, w, h);
            mixImg(x, y, w, h, filter);

        }


    };

    var mixImg = function (x, y, w, h, filter){
        var r, g, b, a, v;
        var canvasData = ctx.getImageData(x, y, w, h);


        if(filter) {

            switch(filter) {
                case 'grayscale':
                    for (var i = 0; i < canvasData.data.length; i+=4){

                            r = canvasData.data[i];
                            g = canvasData.data[i+1];
                            b = canvasData.data[i+2];
                            v = 0.2126*r + 0.7152*g + 0.0722*b;
                            canvasData.data[i] = canvasData.data[i+1] = canvasData.data[i+2] = v;

                    }

                    break;
                case 'retro':
                    for (var i = 0; i < canvasData.data.length; i+=4){

                            r = canvasData.data[i];
                            g = canvasData.data[i+1];
                            b = canvasData.data[i+2];
                            a = canvasData.data[i+3];
                            canvasData.data[i] = r-40;
                            canvasData.data[i+1] = g-50;
                            canvasData.data[i+2] = b+23;
                            canvasData.data[i+3] = 200;

                    }

                    break;

                case 'instagram':
                    for (var i = 0; i < canvasData.data.length; i+=4){

                            r = canvasData.data[i];
                            g = canvasData.data[i+1];
                            b = canvasData.data[i+2];
                            canvasData.data[i] = r+63;
                            canvasData.data[i+1] = g+41;
                            canvasData.data[i+2] = 60;

                    }

                    break;

            } // end of switch
        } // end of if

        ctx.putImageData(canvasData, x, y);

    };



    window.onload = function () {

        initialize();


        if(canvas && canvas.getContext) {
            renderImg(0, 0, 250, 250, myImg, mixImg);
            ctx.save();
            renderImg(250, 0, 250, 250, myImg, mixImg, 'grayscale');
            ctx.save();
            renderImg(0, 250, 250, 250, myImg, mixImg, 'retro');
            ctx.save();
            renderImg(250, 250, 250, 250, myImg, mixImg, 'instagram');
            ctx.save();

            ctx.translate(0, 500);
            ctx.restore();


        }

    };






})('collage', 'img');

How can I mirror the whole canvas(the 4 four images I rendered) I drew and place it on x:0 y:500? I tried to save each image I drew and then translate it on different point and then restore it. But nothing shown except then 4 images I drew. What did I do wrong??

Answer 1

translate only change reference point.

After ctx.translate(0, 500) x = 0 is upper left corner while y = 0 is 500 down.

You have to paint or put data into the canvas as well.

However getImageData and putImageData is not affected by transformation matrix so one have to say e.g.:

var trans = [0, 500];

ctx.putImageData(
    canvasData,
    x + trans[0],
    y + trans[1]
);

or put the data into a memory canvas and use drawImage().

Ref.:

The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods.

As your code is now you also do a draw + read + redraw onto same region. You could use one draw and then use that as source for all other. There is also no need for the save and restore.

---

Edit:

Memory canvas as in document.createElement('CANVAS'). It all depends on how and for what purpose etc. A possible set-up could be.

var img = {}, memc = {}, domc = {};

img.src     = document.getElementById(imgId);
img.w       = img.src.width;
img.h       = img.src.height;

/* DOM Canvas */
domc.can    = document.getElementById(canvasId);
domc.ctx    = domc.can.getContext('2d');
domc.width  = img.w * 2; // Going to duplicate image 2 columns.
domc.height = img.h * 4; // Going to duplicate image 4 rows.

/* Memory Canvas */
memc.can    = document.createElement('CANVAS');
memc.ctx    = memc.can.getContext('2d');
memc.width  = img.w;
memc.height = img.h;