I am creating a site that will allow the user to create a scene using HTML5 and the canvas element.
I was going to use KinecticJS for this, and it looks great. But I have one issue that I am really struggling with.
Since I want to be able to give the user a much higher quality version of their scene for printing, I cannot just give them the 800x600 pixel canvas data because it gets very blurry when you print.
I have seen some forums that suggest simply "scaling up" your canvas and then saving that output but I worry about the performance costs of this. Although it might be my only hope.
Since KinecticJS uses a graph hierarchy to render the scene, I thought it might be possible to create a scene using KinecticJS, then re-render (rather than scale) the same scene, only this time scale up the positions etc... of all the objects in the scene.
Has anyone every done anything like this before? I am still in the research phase so far.
One note, obviously I know about SVG, but I need larger browser support and IE uses VML prior the IE9, and I seriously doubt I can convert a SVG/VML scene into a PNG and maintain browser support.
I have another answer for this:
function makeBig(firstStage) {
newStage.setScale(2);
newStage.add(firstStage.getChildren()[0].clone());
}
This did the trick for me and was easy once you know how :)