CODEWITHSUNDEEP
htmlcanvaskineticjs
Mark
Mark

Reputation: 14930

saving a html5 canvas image in higher resolution

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.

Upvotes: 2

Views: 7440

Answers (2)

Jack Franzen
Jack Franzen

Reputation: 778

You can Scale up your canvas for a single "Capture frame."

You have a draw function or a render function. Give it an argument and if that argument is true, draw to a bigger context. 

var canvas, context; //you already have these
var newCanvas, newContext; //I'm making these
var scaleFactor = 2; //How much we scale?
var ctx; //Identify's which context to 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 all your previous drawing will autoscale
    }

    /*   all your old draw code goes here, 
    change all your context calls to ctx */

    if(screenShot){
        YourNewHighResSuperCoolSnapShotData = newCanvas.toDataURL("image/png");
    }
}

You might wanna look up how toDataURL works, and what it will give you.

This won't take a toll, because you only have to call render(true) when you need the high quality one

Upvotes: 5

Mark
Mark

Reputation: 14930

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 :)

Upvotes: 1

Related Questions