Cropzone Issues?

[SmboBeast]

Hi,

I'm trying to incorporate just the Cropzone pieces into my own React app, but am having difficulties. For some reason, when _getCoordinates is hit, canvasEl.getWidth() and canvasEl.getHeight() come back as 1. This essentially draws a small dot it's everything is only 1 square pixel in size.

Have you had any issues like this? When debugging through the core of fabricjs and going through the call stack, looking at this line (12553): this.drawObject(this._cacheContext, noTransform); - I see this._cacheContext being very different than the ctx in the call stack line before (line 6862): objects[i] && objects[i].render(ctx);

In the render line above (6862), the ctx seems to be correct and is pointing to the canvas we need it to point to. However, by the time line 12553 is hit, the _cacheContext is different.

Wondering if you've seen this type of issue?

[SmboBeast]

Looks like I have an update here. For some reason, cropzone is only actually added successfully if I pass an objectCaching: false property when creating the cropZone. Still haven't figured out why though...

[minkyu-yi]

when _getCoordinates is hit, canvasEl.getWidth() and canvasEl.getHeight() come back as 1.

The this.getWidth() is a fabric-Rect api. And the canvasEl.width is an attribute of canvas element.

What is the canvasEl.getWidth() in your context? (Sorry, Im not goot at english 😅)

[SmboBeast]

No, your English is just fine. :)

Sorry for the delay, it's been the holidays here. So, my fabric canvas is set to 500x500.

If I have objectCaching: false, when creating a new cropzone rect, the context seems to have the right canvas and getWidth and getHeight come back as 500, which is right.

When I don't include objectCaching, getWidth and getHeight come back as exactly the same values as width and height (which is what the cropzone actually is). What's actually weird is canvasEl is pointing to a canvas element that doesn't even exist when I dig through it. So it's obvious it's referencing a different canvas.

In your case, ctx references the lower canvas, so things work just fine. In my case, although the lower canvas exists, ctx actually refers to a brand new canvas. This canvas doesn't even exist in the DOM.