`

“`

i am working on a project where i am using fabricjs with reactjs, i am trying to upload an image through an input tag and set it up as a background for the canvas, here is my code.

import React, { useRef, useEffect, useState } from 'react';
import { Canvas, Image as FabricImage, Textbox } from 'fabric';
import '../Styles/Canvas.css';

const CanvasComponent = () => {
const canvRef = useRef(null);
const [canvas, setCanvas] = useState(null);


const canvasSize = { width: 500, height: 300 };

useEffect(() => {
const canvasInstance = new Canvas(canvRef.current, {
width: canvasSize.width,
height: canvasSize.height,
backgroundColor: 'white',
     });
setCanvas(canvasInstance);

return () => {
canvasInstance.dispose();
     };
[]);

const handleImageUpload = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
const imageUrl = reader.result;
setBackgroundImage(imageUrl);
         };
reader.readAsDataURL(file);
     }
 };

const setBackgroundImage = (imageUrl) => {
const img = new Image();
img.src = imageUrl;
img.onload = () => {
const fabricImage = new FabricImage(img, {
selectable: false,
evented: false,
         });

const scaleFactor = Math.min(canvasSize.width / img.width, canvasSize.height / img.height);
fabricImage.scale(scaleFactor);

canvas.setBackgroundImage(fabricImage, canvas.renderAll.bind(canvas), {
scaleX: canvas.width / fabricImage.width,
scaleY: canvas.height / fabricImage.height
         });
     };
img.onerror = () => {
console.error('Failed to load image');
     };
 };

const clearCanvas = () => {
canvas.clear();
canvas.backgroundColor = 'white';
canvas.renderAll();
 };

const saveCanvasAsPNG = () => {
const dataURL = canvas.toDataURL({
format: 'png',
quality: 1,
     });
const link = document.createElement('a');
link.href = dataURL;
link.download = 'canvas.png';
link.click();
 };

const addPredefinedImage = () => {
const imageUrl = 'wallet-transparent.png';
setBackgroundImage(imageUrl);
 };

const addTextToCanvas = () => {
const text = new Textbox('Editable Text', {
left: 100,
top: 100,
width: 200,
fontSize: 20,
editable: true,
fill: 'black',
     });

canvas.add(text);
canvas.setActiveObject(text);
canvas.renderAll();
 };

return (
     <div className='Container'>
         <div className='Canvas-Wrapper'>
             <div className='Buttons-Wrapper'>
                 <input
type="file"
accept="image/*"
onChange={handleImageUpload}
style={{ marginTop: '10px' }}
                 />
                 <button onClick={clearCanvas}>Clear Canvas</button>
                 <button onClick={saveCanvasAsPNG}>Save as PNG</button>
                 <button onClick={addTextToCanvas}>Add Text</button>
             </div>
             <div className='Canvas'>
                 <canvas ref={canvRef} />
             </div>
         </div>
         <img
src="wallet-transparent.png"
alt="Wallet"
className='Wallet'
onClick={addPredefinedImage}
style={{ cursor: 'pointer', marginTop: '10px' }}
         />
     </div>
 );

};

export default CanvasComponent;

the error i am getting is that the function canvas.setbackgroundimage is not a function, anyone knows the solution for that?

did some researches and the function do exist in the documentation, but for some reason does not show up for me.

““