How to scale what has already been drawn on a canvas

Question

I made a graphing software. But when I zoom in, it becomes laggy because I redraw the screen alot. Could I do the same thing as this page:http://fooplot.com/

When they zoom out, it expands or contracts the predrawn graph, and then redraws when we stopped zooming in.

.scale(2,2); does not seem to scale anything at all. my graph is drawn entirely by using: ctx.fillRect();

tell me if you need the code

Answer 1

You can "fast zoom" using the canvas as its own source for drawImage:

A Demo: http://jsfiddle.net/m1erickson/Yyc5G/

var zoom=2;

function zoom(){

    ctx.save();

    ctx.translate(canvas.width/2,canvas.height/2);  // or your desired zoom point

    ctx.scale(zoom,zoom);

    ctx.drawImage(canvas,-canvas.width/2,-canvas.height/2); 

    ctx.restore();

}

Which will do your fast zooming (yes, with jaggies).

Then when the user stops zooming you can do your better quality redraw.