Resizing Image Without Affecting Look of Original Canvas?

Question

I have a canvas where a user draws. After tapping a button, I do a few things in a second canvas such as trimming away the white space and re-centering the drawing (so as to not affect the original canvas).

I also create a third canvas so I can resize the output to a certain size. My problem is that I don't want the original canvas where users draw to be affected. Right now everything works and my image is resized, but so is the original canvas. How to I leave the original canvas unaffected?

Here's my function:

            //Get Canvas
            c = document.getElementById('simple_sketch');

            //Define Context
            var ctx = c.getContext('2d');

            //Create Copy of Canvas
            var copyOfContext = document.createElement('canvas').getContext('2d');

            //Get Pixels
            var pixels = ctx.getImageData(0, 0, c.width, c.height);

            //Get Length of Pixels
            var lengthOfPixels = pixels.data.length;

            //Define Placeholder Variables
            var i;
            var x; 
            var y;
            var bound = {
              top: null,
              left: null,
              right: null,
              bottom: null
            };

            //Loop Through Pixels
            for (i = 0; i < lengthOfPixels; i += 4) {

                if (pixels.data[i+3] !== 0) {
                  x = (i / 4) % c.width;
                  y = ~~((i / 4) / c.width);

                  if (bound.top === null) {
                    bound.top = y;
                  }

                  if (bound.left === null) {
                    bound.left = x; 
                  } else if (x < bound.left) {
                    bound.left = x;
                  }

                  if (bound.right === null) {
                    bound.right = x; 
                  } else if (bound.right < x) {
                    bound.right = x;
                  }

                  if (bound.bottom === null) {
                    bound.bottom = y;
                  } else if (bound.bottom < y) {
                    bound.bottom = y;
                  }
                }
            }

            //Calculate Trimmed Dimensions
            var padding = 1;
            var trimmedHeight = bound.bottom + padding - bound.top;
            var trimmedWidth = bound.right + padding - bound.left;

            //Get Longest Dimension (We Need a Square Image That Fits the Drawing)
            var longestDimension = Math.max(trimmedHeight, trimmedWidth);

            //Define Rect
            var trimmedRect = ctx.getImageData(bound.left, bound.top, trimmedWidth, trimmedHeight);

            //Define New Canvas Parameters
            copyOfContext.canvas.width = longestDimension;
            copyOfContext.canvas.height = longestDimension;
            copyOfContext.putImageData(trimmedRect, (longestDimension - trimmedWidth)/2, (longestDimension - trimmedHeight)/2);
            copyOfContext.globalCompositeOperation = "source-out";
            copyOfContext.fillStyle = "#fff";
            copyOfContext.fillRect(0, 0, longestDimension, longestDimension);

            //Define Resized Context
            var resizedContext = c.getContext('2d');
            resizedContext.canvas.width = 32;
            resizedContext.canvas.height = 32;
            resizedContext.drawImage(copyOfContext.canvas, 0, 0, 32, 32);

            //Get Cropped Image URL
            var croppedImageURL = resizedContext.canvas.toDataURL("image/jpeg");

            //Open Image in New Window
            window.open(croppedImageURL, '_blank');

Answer 1

How to make a "spare" copy of an html5 canvas:

var theCopy=copyCanvas(originalCanvas);

function copyCanvas(originalCanvas){
    var c=originalCanvas.cloneNode();
    c.getContext('2d').drawImage(originalCanvas,0,0);
    return(c);
}

Make a spare copy of the original canvas you don't want affected. Then after you've altered the original, but want the original contents back ...

// optionally clear the canvas before restoring the original content

originalCanvasContext.drawImage(theCopy,0,0);