The limitDimsByArea() method is used to return the max width and height that can respect the total allowed area for specified aspect ratios. Aspect ratio describes the ratio between the width and height of an image or screen or area. For example, A 1:1 aspect ratio, is a square. The first number always refers to the width, and the second one refers to the height. In this function, aspect ratio described as a single number – in this case, the number refers to the width where the height is 1.
Syntax:
limitDimsByArea(ar, maximumArea)
Parameters: This method accepts two parameters as mentioned above and described below:
- ar: This parameter holds the specified aspect ratio.
- maximumArea: This parameter holds the allowed area.
Return Value: This method returns the limited dimensions by width(x) and height(y).
Example 1:
Javascript
<!DOCTYPE html><html><head> <!-- Adding the FabricJS library -->
<script src=
</script>
</head><body> <script type="text/javascript">
// Calling limitDimsByArea() function over
// the specified aspect ratios and areas
console.log(fabric.util.limitDimsByArea(1, 5));
console.log(fabric.util.limitDimsByArea(2, 20));
console.log(fabric.util.limitDimsByArea(5, 45));
console.log(fabric.util.limitDimsByArea(10, 500));
</script>
</body></html> |
Output:
{"x":2,"y":2}
{"x":6,"y":3}
{"x":15,"y":3}
{"x":70,"y":7}Example 2:
Javascript
<!DOCTYPE html><html><head> <!-- Adding the FabricJS library -->
<script src=
</script>
</head><body> <script type="text/javascript">
// Specifying some aspect ratios and areas
var ar1 = 4;
var ar2 = 6;
var area1 = 50;
var area2 = 100;
// Calling limitDimsByArea() function over
// the above specified aspect ratios and areas
console.log(fabric.util.limitDimsByArea(ar1, area1));
console.log(fabric.util.limitDimsByArea(ar2, area2));
</script>
</body></html> |
Output:
{"x":14,"y":3}
{"x":24,"y":4}