[DrawingCanvas] Scaling background images
Reactive icon
Forge component by Sadanobu Kodan
Application Type

Could you please advise me on how to handle image scaling when inserting an image via URL in the input parameters.

For example I would like the image to stretch to fill the entire canvas, in our instance of the drawingCanvas we are locking the mobile device in portrait if the image is portrait and visa versa for landscape. When in landscape the image is only rendering the top left corner of the image to fill the canvas and cropping the rest out. I have tried adding scaleX, scaleY to the setBackgroundImage() method in the drawingCanvas script but could not find a way of getting the width and height values to do the necessary calculation.

For example:-

 d && c.setBackgroundImage(d, c.renderAll.bind(c),{



                        originX: 'left',

                        originY: 'top'


Please could you advise on how this could be achieved.


Rob Marshall


I am thinking of adding the option shown in the image. Will this achieve your requirements?

Yes that would be perfect, thank you.

I have released a new version and you can download it.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.