Change anything thats allready drawn on canvas

Question

I have 2 canvases.Wat I do is I draw shapes(i.e a line) on the second canvas.When I want to apply transformations(rotate,scale,etc) to this drawn line, I modify the context of first canvas and draw my second canvas on it.Works perfectly.Now when i want to again draw shapes(i.e a line) on second canvas (with transformations),I draw first canvas on second and draw a line on it.Works perfectly fine.Now the problem occurs.When i again want to apply transformations(rotate,scale,etc) to this line i modify the context of first canvas and draw second canvas on it.But this time,I get abrupt changes when I draw on first canvas(draw second canvas).This is due to the transformations applied by drawing 1st canvas on the second and again drawing second canvas to first.Is there a way to change(reset or modify) anything thats already drawn on canvas?

var cantem = document.getElementById('canvasTemp1');  //second canvas
    var ctxtem = cantem.getContext('2d');

    var canMan = document.getElementById('canvasTempMan');    //first canvas
    canMan.style.visibility = "visible";
    var ctxcanman = canMan.getContext('2d');

    var sWidth = getCanvasWidth();               //returns canvas width
    var sHeight = getCanvasHeight();             //returns canvas height

    canMan.height = sHeight;
    canMan.width = sWidth;

    cantem.style.visibility = "hidden";



    ctxcanman.setTransform(1, 0, 0, 1, 0, 0);
    ctxcanman.clearRect(0, 0, cantem.width, cantem.height);

    ctxcanman.translate(sWidth / 2, sHeight / 2);


    ctxcanman.scale(ZoomFactor, ZoomFactor);
    ctxcanman.rotate(RotateAngle * Math.PI / 180);

    ctxcanman.translate(-sWidth / 2, -sHeight / 2);


    ctxcanman.drawImage(cantem, 0, 0, cantem.width, cantem.height, OffsetX, OffsetY, sWidth, sHeight);
    ctxcanman.save();

Now here I draw my first canvas to second-->

 var can = document.getElementById('canvasTempMan');
    can.style.visibility = "hidden";
    var cantem = document.getElementById('canvasTemp1');
    var ctxannotate = cantem.getContext("2d");
    ctxannotate.setTransform(1, 0, 0, 1, 0, 0);
    ctxannotate.clearRect(0, 0, cantem.width, cantem.height);

    ctxannotate.save();
    ctxannotate.drawImage(can, 0, 0, cantem.width, cantem.height, OffsetX, OffsetY, can.width, can.height);

I draw(shapes i.e line) on my second canvas using mouse events and simple context functions like moveTo,lineTo,etc.

Answer 1

There are no elements within the canvas. What is drawn on the canvas can in general not be isolated (unless you're talking about single pixle manipulations).

Instead of storing your work (shapes, rotations and movements) on your canvas, you can store all that in your code, in the form of objects, then you can handle these objects individually be it further manipulation of even deletion.

If you "record" all your actions, you'll be in full control on what will be shown on the canvas.

You can for example have a function that creates a line:

function myLine (xStart, yStart, xEnd, yEnd, deg) {
    this.xS = xStart;
    this.yS = yStart;
    this.xE = xEnd;
    this.xE = yEnd;

    //if needed you can also save the number of degrees that the line has been rotated
    this.deg = deg;
}

Simply make an empty array at the start

var myLines = new Array();

and add your lines to it:

var newLine = new myLine(100,50,200,70,0);
myLines.push(newLine);

The same can be done with circles for example

function myCircle(x,y,radius) {
    this.x = x;
    this.y = y;
    this.r = radius;
    //no point in trying to rotate a circle so leaving the degrees out
}

This way, by storing your work, you can draw it all (or chosen parts thereof) at once by looping through your arrays of shapes.

You can still use two canvases, one to display all your drawn shapes and another one to display your actions connected to your mousemove-events, just like you describe in your question.

Drawing stuff while scale()/rotate()/translate() is active

See here for answer: Returning un-transformed mouse coordinates after rotating an object on html5 canvas