Resize KineticJS Stage without losing quality

Question

I need to put a high resolution image (approx 3072x2304) into a HTML5 Canvas based interface using KineticJS, which the user can add text to, and subsequently output an downloadable image.

However, I want the canvas to be able to fit in a typical monitor for ease of viewing purposes. In other words, I want the display resolution to be less than 1024x768. At the same time, I still want the HTML5 Canvas output image to remain at the high 3072x2304 resolution. I am struggling to achieve a scaled down display resolution without losing image quality.

Right now, either I have to upload a smaller 1024x768 file and sacrifice output quality, or I am forced to introduce scroll bars to the canvas.

How do I get it to work like a regular HTML img tag, where the browser resizes the image, but the source stays high resolution?

    var stage = new Kinetic.Stage({
    container: 'container',
    width: 1024,
    height: 768,
    });
    imageObj.onload = function() {                          
    var backgroundimg = new Kinetic.Image({
    x: 0,
    y: 0,
    image: imageObj,                                    
    width: 3072,
    height: 2304,
    draggable: false,
    });
    stage.add(backgroundimg);

Answer 1

You just about have it worked out...

Load the image into a javascript image object and then use that to create a kinetic image

• imgFull will remain at 3072 x 2304 (its original size)

• backgroundimg will be scaled down to 1024 x 768

Here's example code:

// create the stage

var stage = new Kinetic.Stage({
    container: 'container',
    width: 1024,
    height: 768,
});

// create a layer on the stage

var layer=new Kinetic.Layer();
stage.add(layer);

// create a full sized javascript image object (imgFull)
// and use that to create a Kinetic.Image at 1/3 size (backgroundimg)

var backgroundimg;

var imgFull=new Image();
imgFull.onload=function(){
    backgroundimg=new Kinetic.Image({
        x: 0,
        y: 0,
        image: imageObj,                                    
        width: 1024,
        height: 768,
        draggable: false,
    });
    layer.add(backgroundimg);
}
imgFull.src="yourImage.png";