CODEWITHSUNDEEP
javascriptcanvasfabricjs
Dmitry Teplyakov
Dmitry Teplyakov

Reputation: 2898

Fabric.js object sizes

I have an issue with sizes of objects. Here is a simple example:

<!doctype html>
<html>
<head>
    <script src="js/fabric-0.9.15.min.js"></script>
</head>
<body>
    <canvas id="test" width="512" height="512" style="border: 1px solid black;"></canvas>

    <div style="width: 512px; background: blue;">&nbsp;</div>

    <script>
      var canvas = new fabric.Canvas('test');

      var rect = new fabric.Rect({
        left: 0,
        top: 0,
        fill: 'red',
        width: 512,
        height: 512
      });

      canvas.add(rect);
    </script>
</body>
</html>

As you can see I have a canvas with sizes of 512px and I have a div with width of 512px for testing. Also I created rect object to draw with sizes of 512px.

See screenshot

Fabric draws rect with half sizes. Can you please tell me why or what I do in wrong way?

Upvotes: 0

Views: 295

Answers (1)

Timmetje
Timmetje

Reputation: 7694

The Rectangle is actually 512, 512. The problem you are having is the origin of your object.

Which is the middle of the rectangle,thus showing only a quarter of your rectangle.

Try changing your top and left to 256, you will see the difference.

Upvotes: 2

Related Questions