v6 Image background not working (with reproduction)

[alexisvisco]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

6.3.0

In What environments are you experiencing the problem?

No response

Node Version (if applicable)

None

Link To Reproduction

https://codesandbox.io/p/devbox/upbeat-knuth-rpj7sx?workspaceId=dcb65609-b1a5-4565-8e9b-49821dcd64cf&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm07use6z00073b6izxggl4pj%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm07use6z00023b6i1iq8zu3l%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm07use6z00043b6ifqast4p1%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm07use6z00063b6i2dzi0cbs%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm07use6z00023b6i1iq8zu3l%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm07use6y00013b6iz77tk76u%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cm07use6z00023b6i1iq8zu3l%2522%252C%2522activeTabId%2522%253A%2522cm07use6y00013b6iz77tk76u%2522%257D%252C%2522cm07use6z00063b6i2dzi0cbs%2522%253A%257B%2522id%2522%253A%2522cm07use6z00063b6i2dzi0cbs%2522%252C%2522activeTabId%2522%253A%2522cm07v85sl001h3b6ijhp5heva%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm07use6z00053b6is58izfm2%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522port%2522%253A5173%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522cm07v85sl001h3b6ijhp5heva%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm07use6z00043b6ifqast4p1%2522%253A%257B%2522id%2522%253A%2522cm07use6z00043b6ifqast4p1%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm07use6z00033b6iqmqgy2br%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cm07use6z00033b6iqmqgy2br%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps To Reproduce

There is no step, just as you can see the backgroundImage is not set because we don't see it on the canvas.

Expected Behavior

The background image must appear.

Actual Behavior

The background image is not set and there is no error that tell use the image is not properly loaded or something else.

Error Message & Stack Trace

no

Solution :

FabricImage.fromURL(imageExample).then((img) => {
      img.canvas = canvas;
      canvas.backgroundImage = img;
      canvas.add(
        new Rect({
          left: 100,
          top: 100,
          fill: "red",
          width: 100,
          height: 100,
        })
      );
      canvas.renderAll();
    });

Instead of:

FabricImage.fromURL(imageExample, (img) => {
      img.canvas = canvas;
      canvas.backgroundImage = img;
      canvas.add(
        new Rect({
          left: 100,
          top: 100,
          fill: "red",
          width: 100,
          height: 100,
        })
      );
      canvas.renderAll();
    });

[asturur]

I see you are using fabric 6 with fabric 5 code.
Please read at leat this before:
https://fabricjs.github.io/docs/upgrading/upgrading-to-fabric-60/
and the linked issue in the doc.
Should contain the most important changes to upgrade.

[alexisvisco]

I see you are using fabric 6 with fabric 5 code. Please read at leat this before: https://fabricjs.github.io/docs/upgrading/upgrading-to-fabric-60/ and the linked issue in the doc. Should contain the most important changes to upgrade.

Thanks for your reply but :

import * as fabric from "fabric"; 
new fabric.Canvas(...)

is equivalent to

import { Canvas, Rect } from 'fabric'

No ?

I read the issue before posting here, that's why I am using canvas.backgroundImage imstead of the old setter. I still think there is an issue with the background image, could you provide a working example please ?

[alexisvisco]

@asturur I updated the reproduction codepen. Using new import syntax still not works :/

[asturur]

Read it all, you have to cross half page to get to your issue.
Are you using an ide that is type aware? That will also guide you a lot.

[alexisvisco]

Read it all, you have to cross half page to get to your issue. Are you using an ide that is type aware? That will also guide you a lot.

I am indeed using a IDE.

It's really nice of you to answer, but if you know exactly what I need to do to solve my problem, why don't you just tell me what I need to do instead of making me play guessing games. I think you put some effort into this version, guiding towards its use is I think a good thing.

I was reading your test files to know how v6 works, so I need some guidance to make it work, please be kind.

Because with what you tell me I don't know if you mean the documentation page you linked or the issue regarding breaking changes. And the middle of a page is very subjective...

[asturur]

Is very simple, i have a lot of documentation to write, and if the one i wrote doesn't work, i need to improve.

The documentation tells you that old apis that take callback are now based on promise, and there is an example of the difference.

codesandbox when you hover over the function name shows that the callback is in the place of loading options and is underlined in red.

You have to add the image to canvas in the then part.
The function is a promise and return the fabricImage.

[alexisvisco]

Thanks you I appreciate you to explain me what's exactly goes wrong, you were right :)

[asturur]

Looking at it now, is that part of the documentation sufficient in your opinion?