I am working on a fabric js application & i need work with measurement units like inches & mm
I tried this code & it display blank
So my question is how work with units like inch & mm in fabric js

a = new fabric.Rect({ 
            top:0,
            left:0 ,
            fill: '#000',
            width: 50mm,
            height: 50mm,
           
        });
b = new fabric.Rect({   
            top:0,
            left:200,   
            fill: '#000',
            width: 1in,
            height: 1in,
           
        });
    canvas.add(a, b);

<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

I am working on a fabric js application & i need work with measurement units like inches & mm
I tried this code & it display blank
So my question is how work with units like inch & mm in fabric js

a = new fabric.Rect({ 
            top:0,
            left:0 ,
            fill: '#000',
            width: 50mm,
            height: 50mm,
           
        });
b = new fabric.Rect({   
            top:0,
            left:200,   
            fill: '#000',
            width: 1in,
            height: 1in,
           
        });
    canvas.add(a, b);

<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

• javascript
• unit-testing
• fabricjs

1 Answer 1

fabricjs works in pixels. There is a function: fabric.util.parseUnit() that can parse inches, mm, pixels, points.

    a = new fabric.Rect({ 
                top:0,
                left:0 ,
                fill: '#000',
                width: fabric.util.parseUnit('50mm'),
                height: fabric.util.parseUnit('50mm'),

            });
    b = new fabric.Rect({   
                top:0,
                left:200,   
                fill: '#000',
                width: fabric.util.parseUnit('1in'),
                height:  fabric.util.parseUnit('1in'),
            });
canvas.add(a, b);