[Question] Scale Background Images along with Stage

[josesayago]

Hello, I am currently experiencing an issue with scaled views. I will give you a quick explanation so you get the context.

I am working on an app which will allow users to export big images for printing (i.e. A6 = 1240px x 1748px), however I need to scale down the view so users can work on images in their port view.

After some research I created the function below:

function _dynamicScale( params ) {
    gutter          = 200;
    initialScale    = params.zoom;
    initialWidth    = jQuery('#canvasEditor').innerWidth();
    initialHeight   = jQuery('#canvasEditor').innerHeight();
    width           = initialWidth / initialHeight * ( jQuery(window.top).innerHeight() - gutter );
    height          = jQuery(window.top).innerHeight() - gutter;
    xScale          = ( width / initialWidth ) * initialScale.x;
    yScale          = ( height / initialHeight ) * initialScale.y;
    scale           = { x: xScale, y: yScale };
    params.zoom     = newScale;
    params.width    = width;
    params.height   = height;
    stage.scale( params.zoom );
    stage.size({
        width: params.width,
        height: params.height
    });
    jQuery('#canvasEditor').css({
        width: params.width,
        height: params.height
    });
    stage.draw();
}

It works, but once I add an image as canvas background I need to set the stage back to its original size so the image is set to the real stage size and not the scaled one. The problem is when I run the function to scale everything back into port view, everything but the background image gets scaled down.

As a result I get a big background image in a scaled down stage. Please check the following screenshot:

Once I am going to export this canvas in real size, I get the full picture:

I have been trying different approaches for hours but nothing seems to work. I have found this example: HTML5 Canvas Expand Image on Hover which scales the image's layer, but how can I achieve the same with dynamic image layers (where there is no layer object to refer to)?

Thanks in advance for your help.

[confile]

+1

[lavrton]

Can you create jsfiddle?