# How to set the angle of a Line in FabricJS?

In this tutorial, we are going to learn about how to set the angle of a Line object using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. In order to set the angle of a line object we use the angle property.

### Syntax

new fabric.Line( points: Array , { angle: Number }: Object)


### Parameters

• points − This parameter accepts an Array of points which determines the (x1, y1) and (x2, y2) values, those being the x- and y-axis coordinates of the start and end of the line respectively.

• options (optional) − This parameter is an Object which provides additional customizations to our Line object. Using this parameter stroke, corner colour, origin and a lot of other properties can be changed related to the Line object of which angle is a property.

### Options Keys

• angle − This property accepts a Number that determines the angle of rotation of an object in degrees.

## Default appearance of Line object

### Example

Let’s see a code example of how the Line object appears when the angle 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 appearance of Line object</h2>
<p>
You can see the default appearance of line object
</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 Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
});

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


## Using the angle property

### Example

In this example, we have used the angle property and assigned it a value of 60. This will make sure that our Line object has an angle of rotation of 60 degrees.

<!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>Using the angle property</h2>
<p>
You can see the angle of rotation is 60 degrees
</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 Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
angle: 60
});

// Add it to the canvas