fabric.js | Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser | Canvas library

You don't need the window part, there are some typos in the Rect object and className won't work in Svelte. If you want to directly draw without having to click on the canvas, you can do this inside onMount. Here's a working REPL
(when opening the REPL there might be an errorfabric is not defined - just move the one line down, then it's working...)

You could extend the draw function of the cropping rectangles.

You use the setControlsVisibility method on a fabric object:

At the moment you have both drawing and selecting because Fabric makes it's associated canvas selectable by default.

This behaviour is controlled by changing the boolean .selection property on the object returned by calling new fabric.Canvas().

So all you have to do is set up two buttons (Select/Draw), set canvas.selection to the desired state and return from the mouseMove handler before doing any drawing in case selection==true.

Here's an example:

OK! There are a few things going on here and after some head banging with some fantastic folks over on the graphic design forum on stackexchange we have answers to these problems.

Firstly:

The reason the file doesn't render on the canvas is because the width and height parameters are missing from the svg file as pointed out by @sphinxxx.

Secondly:

The reason the masked textures (opacity masks) are not rendered is because the image files used to create the textures are linked and not embedded in the file.

To prevent these problems from occurring, we need to do things very specifically when exporting.

1. Choose "File-->Export-->Export As-->save as type-->svg
2. Make sure "Responsive" is deselected, this will ensure that the width and height parameters are included in the svg file. (The consequence of this is that you need to make the original artwork as big as you ever need it, we can always scale down on the canvas programmatically) the file will now render on canvas.
3. To ensure the opacity masks (textures applied to images) are rendered on canvas, make sure that the "Images" option is set to "Embed" as shown below:

A big shout out to @Billy Kerr and @Wolff for helping out on these issues.

Hope this helps someone else here.

Fishbite

I solved my problem.

Brief simplified explanation of the solution:
I created a new class called LassoBrush (very similar to the PencilBrush class except stroke width value is 0, stroke color = null and fill I changed from null to this.color (for which is whatever the user sets) and then is called like so..

After i find several solution, i found that this problem is has the same solution to this post how to load fabricjs as texture for obj using threejs

the problem was i use fabricjs canvas as argument for THREE.Texture which only support image, so i change it to canvas tag instead, read above post hope it helps someone.

try the following code it works for me

Your POST data is not encoded properly, you can use encodeURIComponent to do this