Home/ Questions/Q 8978407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T19:36:19+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0