can we change the shape of canvas using fabric js

Question

I want to add objects inside shirt, by default canvas is of square shape how can i make this type of canvas? I have tried using css it only changes shape ,but functionality of canvas remains same like square.

Answer 1

Check this out: https://ourcodeworld.com/articles/read/1016/how-to-create-your-own-t-shirt-designer-using-fabricjs-in-javascript

If you read the blog post, and look at the last demo, you will find that it cropping image with that padding over the image. But thats not pixel perfect. For doing that read below

Pixel Perfect Shape Cropped Canvas

1. We can clip our canvas to shape we want. This will hide rest of the canvas.
   Reference: Fabric.js Clip Canvas (or object group) To Polygon
2. Now you will face one more problem that your controls are also clipped which make user experience pathetic.
3. Solution is use canvas.controlsAboveOverlay = true;

Creating custom svg images

There are 2 ways to this

1. Google and download svg images that you need.
2. Use Figma, by which you can create custom objects using pen tool and export them as svg.

TIP: Use figma plugin Image tracer to extract svg from images.