saving a html5 canvas image in higher resolution -

i creating site allow user create scene using html5 , canvas element.

i going use kinecticjs this, , looks great. have 1 issue struggling with.

since want able give user higher quality version of scene printing, cannot give them 800x600 pixel canvas data because gets blurry when print.

i have seen forums suggest "scaling up" canvas , saving output worry performance costs of this. although might hope.

since kinecticjs uses graph hierarchy render scene, thought might possible create scene using kinecticjs, re-render (rather scale) same scene, time scale positions etc... of objects in scene.

has every done before? still in research phase far.

one note, know svg, need larger browser support , ie uses vml prior ie9, , doubt can convert svg/vml scene png , maintain browser support.

you can scale canvas single "capture frame."

you have draw function or render function. give argument , if argument true, draw bigger context.

var canvas, context; //you have these var newcanvas, newcontext; //i'm making these var scalefactor = 2; //how scale? var ctx; //identify's context draw to....  function render(screenshot){     ctx = context;     if(screenshot){         if(!newcanvas){             newcanvas = document.createcanvas();             newcontext = newcanvas.getcontext('2d');         }         newcanvas.width = canvas.width * scalefactor;         newcanvas.height = canvas.height * scalefactor;          ctx = newcontext;         newcontext.scale(scalefactor, scalefactor); //now previous drawing autoscale     }      /*   old draw code goes here,      change context calls ctx */      if(screenshot){         yournewhighressupercoolsnapshotdata = newcanvas.todataurl("image/png");     } } 

you might wanna how todataurl works, , give you.

this won't take toll, because have call render(true) when need high quality one