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

[mscofield0]

None of these solutions work

[nihaojob]

https://github.com/nihaojob/vue-fabric-editor This project provides the ability to scale the canvas.

[YouCanflyThruMostTheSun]

How is this an issue? Are you kidding me? How long has this been in development and we are still having to create hacky a** methods to just resize a canvas... this is beyond ridiculous.

[asturur]

The canvas responsiveness depend on your layout. Measure the space where your canvas will be and apply the correct dimension to it, i don't see any hacky a** methods here.

There is no CSS that is going to resize the canvas pixels, if you want a non crisp canvas, just make a css for it, assign the width and height as css only as 100% and move forward. If you want it crisp with the pixels you have to resize it when the space change. You can use the ResizeObserver or the resize event window.

Regarding this being in development, this is not at all, is not the focus of this library, everyone does a responsive canvas using the methods and technologies that work best with the framework of choice.

There are probably full blown done editor apps already responsive and open source based on fabricJS or other libraries if you need one, you don't need to build your responsive app from scratch if it is a burden

[ShaMan123]

We can also point out the CONTRIBUTING to make fabric less hacky instead of just pointing it out A util for resizing, a package of your making - why leave it as is? - go ahead and fix it