html5 - using single canvas i have drawn two different diagrams using javascript,is there any way i can remove last drawn diagram in canvas -

using single canvas element have drawn 2 different diagrams using javascript,is there way remove last drawn diagram in canvas.here canvas code <canvas style="width: 100px; height: 100px; border: 1px solid red;" id="cns"></canvas> , have created diagram using javascript , in button click trying remove last drawn diagram var c = document.getelementbyid("cns"); var d = c.getcontext("2d"); d.fillstyle = "#ff0000"; d.fillrect(0, 0, 106, 106); var c1 = document.getelementbyid("cns"); var d1= c.getcontext("2d"); d1.fillstyle = "#00a550"; d1.fillrect(0, 0, 90, 90); $("#clk").click(function () { d1.clearrect(0, 0, 90, 90); });,but clears whole rectangle on given size.is there clear last drawn image

i see you're getting multiple references same canvas (id=cns) , multiple references context.

for single canvas, there 1-and-only-1 context canvas. single canvas not have multiple layers (like photoshop example).

therefore d , d1 variables contain same context. , that's why clearing either d or d1 clear same area on canvas.

the usual method handling multiple sets of drawings (multiple diagrams) on canvas to:

• save enough information recreate each individual drawing (diagram) -- saved in js object.

• clear entire canvas.

• use saved information redraw desired diagram.