Fabric.js: fabric.js › Issue using a responsive canvas

[stevesherrin]

I have created a website to allow users to design playing cards online using fabricjs and have made the canvas responsive so it will work equally well on mobile devices as desktop. Almost everything works perfect... On smaller screens the objects are scaled correctly with the canvas and positioned correctly based on the canvas size but selecting/manipulating the objects doesn't work properly. When the canvas is scaled down from it's original (desktop based) size I cannot click on the object. I have noticed that the point on the canvas you need to click to select the object is shifted down and right from the object itself. The smaller the canvas gets, the further from the object the selection point gets. Is there a way to fix this?

[asturur]

if you are transforming the canvas with css, you will have troubles.
You should resize it in pixels.

Please add a fiddle to demonstrate the problem.

[stevesherrin]

Here is the fiddle:

https://jsfiddle.net/stevesherrin/wq3pyhhu/4/

Notice everything works fine as long as the canvas is the original size (525x725) but if you scale your browser down until the canvas is smaller and try to click on the text object it doesn't work. If you drag a selection marquee below and to the left of the text the text becomes selected

[asturur]

if is something that with a 2-3 lines fix can be fixed, glad to help.
i think we are not considering css right now.

your fabricjs workaround would be:

https://jsfiddle.net/wq3pyhhu/8/

[stevesherrin]

Thank you so much! That solves it perfectly!

[asturur]

@farhad consider that even if the click is fixed, the aspect of controls will not.

[ncou]

@asturur : can you explain what could be the "possible feature" behind this ticket ? Thank you.

[asturur]

that if is doable without adding 200 lines of code, we could do it.
The point is understanding the transform applied to canvas from the browser css
and use it in the logic from pointer to coordinates.

Is super low priority, if you have time and will to do something, look elsewhere :)

[zqillini4]

Can you tell me what change you made in the workaround (https://jsfiddle.net/wq3pyhhu/8/)? The link to the original jsfiddle no longer works.

Thanks.

[Aarbel]

looks like https://github.com/tsand/responsive-sketchpad do it

[robsch]

An apprently full working solution can be found here: https://jsfiddle.net/robsch/g8x9mjvt/

[asturur]

yes that is good.
Also maybe who wants to use it in production could eventually debounce it if the canvas drawing takes some time.
You could open a SO question and answer yourself, that snippet may be usefull to more people

[robsch]

Supplied an answer here: https://stackoverflow.com/a/60614910/57091