Fabric.js: Image gets cropped instead of resized upon applying width and height

[semiadam]

I upgraded to v2 and realized all my images are messed up. Previously, when you set width and height on an image element, it resized the entire image to that size. In v2, it only masks the images at the requested size, and the actual image remain at its original size. If you get an SVG output, it behave like before (resizes the entire image) so I assume this is a bug in V2.

Version

2.0

Test Case

http://jsfiddle.net/Da7SP/839/

Steps to reproduce

• load an image from URL
• set width and height properties on the image
• notice that images is not resized to (width x height). Instead, it's masked.

Expected Behavior

the entire image should get resized to width x height. No cropping should happen.

Actual Behavior

upon applying width and height properties, image gets cropped instead of resized.

[asturur]

http://fabricjs.com/v2-breaking-changes#image

please read here, is a breaking change of v1 -> v2

[semiadam]

Thanks for quick reply. Two things:

1- With V2 behavior, what is your recommended method of loading an image with arbitrary original dimensions and showing it on the canvas at a certain size? A very common use case is when user uploads an image (of any dims) and you want to cover, say, 50% of your canvas with it. I can think of using ScaleX and ScaleY, but the problem is that I don't know the original dimensions of the image, so not sure what scales to use. Can you please shed some light on this scenario?

2- Please check my updated fiddle here: http://jsfiddle.net/Da7SP/840/
If you download the SVG from canvas, you see the SVG is different than canvas content. Is seems that SVG output still behaves as V1 and shows the entire image, while the canvas crops it. Is this normal or is a bug?

[asturur]

there are scaleToWidth and scaleToHeight to scale an image.

Please for the svg open a clear different issue.