# How to lock the flipping during scaling of Textbox using FabricJS?

FabricJSHTML5 CanvasJavascript

In this tutorial, we are going to learn how to lock the flipping during scaling of a Textbox using FabricJS. Just as we can specify the position, colour, opacity and dimension of a textbox object in the canvas, we can also specify whether we want to stop flipping an object during scaling. This can be done by using the lockScalingFlip property.

## Syntax

new fabric.Textbox(text: String, { lockScalingFlip : Boolean }: Object)


## Parameters

• text − This parameter accepts a String which is the text string that we want to display inside our textbox.

• options (optional) − This parameter is an Object which provides additional customizations to our textbox. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the object of which lockScalingFlip is a property.

## Options Keys

• lockScalingFlip − This property accepts a Boolean value. If we assign it a ‘true’ value, then the object will not be allowed to flip during scaling.

## Example 1

Default behaviour of a Textbox object in the canvas

Let’s see a code example to understand the default behaviour of a textbox object when lockScalingFlip property is not used.

<!DOCTYPE html>
<html>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
<body>
<h2>Default behaviour of a Textbox object in the canvas</h2>
<p>Select a corner and drag diagonally to scale it and then flip it following the same path </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);

// Initiate a textbox object
var textbox = new fabric.Textbox("The wisest mind has something yet to learn.", {
width: 400,
left: 110,
top: 70,
fill: "orange",
strokeWidth: 2,
stroke: "green",
textAlign: "center",
});

// Add it to the canvas
</script>
</body>
</html>


## Example 2

Passing lockScalingFlip as key with ‘true’ value

In this example, we will see how we can cease the ability of a textbox object to flip while scaling by using the lockScalingFlip property. As we can see, although we try to flip the textbox object, it is no longer allowed.

<!DOCTYPE html>
<html>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
<body>
<h2>Passing lockScalingFlip as key with "true" value</h2>
<p>You will no longer be able to flip the textbox while scaling it</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);

// Initiate a textbox object
var textbox = new fabric.Textbox("The wisest mind has something yet to learn.", {
width: 400,
left: 110,
top: 70,
fill: "orange",
strokeWidth: 2,
stroke: "green",
textAlign: "center",
lockScalingFlip: true,
});

// Add it to the canvas