Question

I implemented a zoom-in and out function, but every time I zoom, I clear the whole canvas, scale and translate it, and then redraw everything again.
the problem, is that redrawing takes a long time (I have a lot of objects on the canvas).

is there a way I can just copy the whole scene, scale and translate the canvas, and then just paste
it without ltoosing quality all?

thanks

Answer 1

yes. You can copy the canvas using drawImage to a temp image and then redraw later. This thing I’m working on has a resize function. Have a look:

http://mtcanvas.com/mem/pencilman/

just for ref this is the main part:

    function resizeCanvas(){

      cWidth = widthInput.val();
      cHeight = heightInput.val();

      jtmp.width = cWidth;
      jtmp.height = cHeight;
      clear(ctmp);
      ctmp.drawImage(jc, 0, 0);


      frame.css({width : cWidth});
      canvas.attr({width : cWidth, height : cHeight});
      clear(c);
      c.drawImage(jtmp, 0, 0);
      win.trigger("resize");
    }