Let’s draw circle and ellipse on the canvas. If you’ve read my previous article then you probably already know how.
I wanted to include circle and ellipse in the same article because the concept behind drawing them on the canvas is pretty similar.
Let’s see the constructor definition for circle and ellipse first:
new fabric.Circle( options: Object )new fabric.Ellipse( options: Object )Conic Sections
The reason for them being similar is because circle and ellipse both belong to the family of conic sections. Conic sections are obtained when we “slice-through” a cone with a plane like so:
Now let’s not get too caught up in maths because that’s not going to get us very far. In layman’s terms, a circle becomes an ellipse when it is stretched in any one direction(either vertical or horizontal).
In order to draw a circle we need to know its radius whereas while drawing an ellipse we need to know the values center, major and minor axis. This concept remains the same while we draw circle or ellipse on the canvas.
If we initialize a circle without giving the radius property a value, then the circle wouldn’t be rendered on the canvas.
Similarly, we need to set the values for rx (horizontal radius) and ry (vertical radius) when we initialize an ellipse object.
Exploring options for ellipse and circle
Let’s finally get our hands dirty and write some code, shall we?
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<canvas
id="canvas"
style="border: 2px solid black"
width="400"
height="300"
></canvas>
<script>
var canvas = new fabric.Canvas("canvas", {
backgroundColor: "black",
});
// Creating an instance of fabric.Ellipse
var ellipse = new fabric.Ellipse({
top: 90,
left: 70,
rx: 90, // Horizontal radius
ry: 45, // vertical radius
stroke: "#a76bcf",
strokeWidth: 3,
angle: 15,
borderColor: "#7fff00",
cornerColor: "#7fff00",
});
// Creating an instance of fabric.Circle
var circle = new fabric.Circle({
top: 70,
left: 250,
radius: 80, // radius of the circle is 80 px
fill: "#00b7eb",
scaleX: 0.5, // scaling done in x-axis which reduces the size by half
scaleY: 0.5, // scaling done in y-axis which reduces the size by half
borderColor: "#7fff00",
cornerColor: "#7fff00",
});
// Adding them to the canvas
canvas.add(ellipse, circle);
</script>
</body>
</html>I’ll be honest, this might seem like a lot (especially if you are a beginner) but really it’s NOT. As you keep practicing, all this will be a piece of cake for you, I promise (^ — ^) . And if that is not the case for you then you must be doing something right with your life which I haven’t been doing.
Drawing an ellipse on the canvas
In order to create an ellipse I have created an instance of fabric.Ellipse and set the values for rx and ry (don’t forget these!).
The stroke and strokeWidth properties specifies the color and width of an object’s stroke. You might remember this property from your css days- and believe me there is no difference between the two.
Drawing a circle on the canvas
In order to create a circle, we need to create an instance of fabric.Circle and give it some radius by using the radius property. Remember, if we don’t set the radius, the circle will not be rendered on the canvas.
You might notice the borderColor and cornerColor properties and think that the border of the circle must be its stroke so what is the purpose of these properties?
If you have been thinking that, you are R-I-G-H-T because the borderColor and cornerColor are properties which are designed for changing the color of the controlling border and controlling corner respectively.
FabricJS gives us the freedom to move around, scale or skew an object in all directions with the help of controlling borders and corners. Just as the name suggests, as soon as we click on an object, it’s controls are in our hands and we can manipulate it by using those controls in any way we like.
More options…
In the code below, I have added two more options to show you that, you can actually disable object controls.
You can simply add lockRotation (accepts a Boolean value) property to disable the middle-top-rotate control which allows us to rotate an object.
// Creating an instance of fabric.Ellipse
var ellipse = new fabric.Ellipse({
top: 90,
left: 70,
rx: 90, // Horizontal radius
ry: 45, // vertical radius
stroke: "#a76bcf",
strokeWidth: 3,
angle: 15,
borderColor: "#7fff00",
cornerColor: "#7fff00",
lockMovementX: true, // Stops any movement in the x-direction
});
// Creating an instance of fabric.Circle
var circle = new fabric.Circle({
top: 70,
left: 250,
radius: 80, // radius of the circle is 80 px
fill: "#00b7eb",
scaleX: 0.5, // scaling done in x-axis which reduces the size by half
scaleY: 0.5, // scaling done in y-axis which reduces the size by half
borderColor: "#7fff00",
cornerColor: "#7fff00",
lockRotation: true, // Halts the middle-top-rotate control
});As for the ellipse, the lockMovementX (accepts a Boolean value) property is set to false which thereby stops us from moving the ellipse in the x-direction.
You can see in the gif below that even though I can move the circle in all directions in the canvas, I can only move the ellipse in the y-axis of the canvas.
Also, if you notice, that although we have not assigned a fill color to the ellipse, it’s fill color is actually black. This is because by default FabricJS sets the fill color of an object as rgb(0,0,0) which is nothing but the rgb color code for black.
Useless Outro
So that was it for today’s article. I hope that was easy to digest. See ya~
