Skip to main content
FlatChat
Inspiring
Apr 8, 2022 1:31 AM UTC
Question

HTML5 Canvas - Constrain image/SVG scaling to stage size

I am using createjs.Bitmap to add an SVG to the stage.

 

The project is using a responsive layout..

 

The problem is the SVG does not scale relative to the stage and other elements around it.

 

var patientImagePath = data['patient_image_path']

patientImage = new createjs.Bitmap(patientImagePath);

patientImage.x = 96;
patientImage.y = 36.05;
patientImage.scaleX = 0.16;
patientImage.scaleY = 0.16;

root.patientDetailsModal.addChild(patientImage);

'Normal' view on large monitor:

 

 

and after reducing the browser size using dragging (not using zoom...).

 

 

Any solutions?

    This topic is closed to new replies. Start a new post to keep the conversation going.

    5 replies

    FlatChatAuthor
    Inspiring
    Apr 8, 2022 1:44 AM UTC

    If I just import the SVG to the stage, without using new createjs.Bitmap, then the SVG scales fine.

     

    But I need to load the SVGs dynamically...

     

     

    Translate
    FlatChatAuthor
    Inspiring
    Apr 8, 2022 6:00 AM UTC

    Also, looking at the SVG code, the viewBox is:

     viewBox="0 0 151.5 163.7"

     

    But if I don't apply the scale at:

    patientImage = new createjs.Bitmap(patientImagePath).set({scaleX: 0.16, scaleY: 0.16});

     

    Then the image is loaded in a really enormous size.  I think the problem of scaling might be dealt with if the SVG just loaded in its viewbox size...

    Translate
    FlatChatAuthor
    Inspiring
    Apr 8, 2022 6:17 AM UTC

    UPDATE

     

    Changed the format to PNG, and without scaling, comes in at it's original size (151.5 x 163.7), which is perfect. However, I want to use SVG, not PNG.

     

    It seems the SVG just gets scaled up to a huge size despite the viewport size...

    Translate
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices