Public property for canvas element, and new CSS background image option.

[rsm-hcd]

Wanted to publicly expose the canvas HTML element via the API. Added an option to use CSS to center contain the specified background image. This is intended for display purposes only, not expected to be included when the canvas is saved as an image.

[tbolis]

Hi @AndcultureCode and thank you for contributing at this!

Not sure if I want to merge this since I am thinking that if you wish to put an image behind the canvas you can do that by providing an appropriate class for the SketchField

Am I missing something?

Thomas

[rsm-hcd]

Hi @tbolis the reason you wouldn't set a css class to accomplish this is due to the math involved when setting the background-position property since it depends on the dimensions of the image (that needs to be loaded first). The relevant code is:

img.onload = () => {
     const sizeX = img.width <= img.height ? "auto" : "100%";
     const sizeY = img.width > img.height ? "auto" : "100%";
     this._canvas.style.background = `url(${dataUrl})`;
     this._canvas.style.backgroundSize = `${sizeX} ${sizeY}`;
     this._canvas.style.backgroundRepeat = "no-repeat";
     this._canvas.style.backgroundPosition = "center";
 };

[tbolis]

ok sounds fair, I will think about it a bit more on how I can support you on this
cheers

[karlvr]

The Fabric StaticCanvas has a getElement() method which returns the underlying canvas. Would exposing getElement() be more appropriate in react-sketch?