Manipulating HTML5 Canvas Using Konva: Part 2, Basic Shapes

The introductory tutorial of the series taught you how to draw your first shape using Konva. It also explained how layers and groups work in Konva. In the rest of the series, we will focus on more specific topics like creating basic and complex shapes or attaching event listeners to different shapes in order to make your graphics interactive.

This particular tutorial will show you how to create basic shapes like rectangles, circles, and ellipses in Konva. You will also learn about different attributes that can be used to customize the appearance of all these shapes based on your needs. Later sections of the tutorial will discuss how to draw different kinds of lines and regular polygons using Konva.

Drawing Rectangles, Circles, and Ellipses

You can create rectangles in Konva using the Konva.rect() object. The position of the top left corner of a rectangle can be specified using the x and y properties. Similarly, you can specify the width and height of the rectangle using the width and height properties. All the rectangles that you draw will have sharp corners by default. However, you can make them round by choosing an appropriate value for the cornerRadius property.

It is possible to show or hide a rectangle using the visible property. If you don't want to completely hide a rectangle but still make it semi-transparent, you can use the opacity property. You can set it to any number between 0 and 1 inclusive. The shape will not be visible if opacity is set to 0.

You can also rotate or scale your rectangle shapes using the rotation and scale properties respectively. The rotation is specified as a plain number but applied in degrees. You have the option to scale any rectangle on either the x or y axis independently using the scaleX and scaleY properties.

Here is an example that draws different rectangles on a canvas using all the properties we just discussed.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var rectA = new Konva.Rect({
  x: 10,
  y: 10,
  width: 200,
  height: 50,
  fill: "yellow",
  stroke: "black"
});

var rectB = new Konva.Rect({
  x: 160,
  y: 30,
  width: 80,
  height: 250,
  fill: "orange",
  stroke: "black"
});

var rectC = new Konva.Rect({
  x: 200,
  y: 160,
  width: 180,
  height: 180,
  cornerRadius: 10,
  strokeWidth: 10,
  opacity: 0.8,
  fill: "red",
  stroke: "black"
});

var rectD = new Konva.Rect({
  x: 400,
  y: 20,
  width: 180,
  height: 180,
  scaleX: 1.8,
  scaleY: 0.75,
  rotation: 45,
  fill: "lightgreen",
  stroke: "black"
});

layerA.add(rectA, rectB, rectC, rectD);

stage.add(layerA);

You should note that the rectangles are not drawn in the order in which they are created. Instead, they are drawn in the order in which they were added to the layer. The fill and stroke properties are used to set the fill and stroke color respectively.

You can create circles in Konva using the Konva.circle() object. This time, the x and y properties determine the center point for drawing the circle. You can still specify a value for both the width and height properties. These values are used to calculate the diameter of the circle to be drawn. However, a circle has equal width and height. This means that the value specified later takes precedence over the one specified earlier in case of conflict. In other words, if you set the width of a circle to 100 and later set its height to 180, the circle will have a diameter of 180 and the width will be ignored.

To avoid confusion, you can omit the width and height properties and specify a value for the radius of the circle. Keep in mind that you have to set the radius to 50 in order to draw a circle whose width and height is 100.

In a similar fashion, you can also create an ellipse using the Konva.ellipse() object. The only difference is that the radius property will now accept an object with x and y properties as its value. If specified, the width and height property will now be applied independently to determine the final shape of the ellipse.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var circA = new Konva.Circle({
  x: 100,
  y: 100,
  width: 180,
  fill: "yellow",
  stroke: "black"
});

var circB = new Konva.Circle({
  x: 180,
  y: 150,
  height: 100,
  fill: "orange",
  stroke: "black"
});

var circC = new Konva.Circle({
  x: 200,
  y: 275,
  radius: 100,
  opacity: 0.5,
  fill: "red",
  stroke: "black"
});

var ellipA = new Konva.Ellipse({
  x: 400,
  y: 75,
  width: 70,
  height: 100,
  rotation: -15,
  fill: "lightgreen",
  stroke: "black"
});

var ellipB = new Konva.Ellipse({
  x: 400,
  y: 75,
  width: 80,
  height: 120,
  rotation: -15,
  strokeWidth: 5,
  fill: "white",
  stroke: "black"
});

var ellipC = new Konva.Ellipse({
  x: 450,
  y: 275,
  radius: {
    x: 100,
    y: 50
  },
  scaleY: 2,
  fill: "violet",
  stroke: "black"
});

layerA.add(circA, circB, circC, ellipB, ellipA, ellipC);

stage.add(layerA);

You should note that ellipB has bigger height and width compared to ellipA. Since they both have the same x and y values, I had to add ellipB to the layer first in order to keep ellipA visible. If ellipB was added after ellipA, it would have been drawn over ellipA, hiding it from the viewers.

If you observe closely, you will also see that the violet circle is actually an ellipse with y radius set to 50 and x radius set to 100. However, it has been scaled by a factor of 2 in the y direction. The scaling increases the stroke width as well, making it two times wider at the top and bottom of the ellipse compared to its left and right edges.

Drawing Lines Using Konva

You can use the Konva.Line() object in order to create different kinds of lines and curves. All lines require you to specify the points through which the line should pass using the points property. The points are specified as an array.

You can join any set of points provided using the points array to form a polygon by setting the value of the closed attribute to true. Similarly, you can convert a set of straight lines into splines by setting a value for the tension attribute. A value of zero will result in straight lines. Higher values create curvier lines.

It is possible for you to create a closed and curvy shape (a blob) by setting a value for the tension property as well as closing the curve by setting closed to true.

Like the rest of the shapes that we have discussed, you can set the stroke width for drawing the lines using the strokeWidth attribute. You can also specify a fill color for closed shapes.

In the following example, I have used the same set of points to plot all the shapes. However, I have also used the move() method to shift each shape by a specific distance in order to avoid overlaps.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var lineA = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  stroke: "black"
});

var lineB = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  closed: true,
  fill: "yellow",
  stroke: "black"
});

var lineC = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  tension: 0.8,
  stroke: "blue"
});

var lineD = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  tension: 1.8,
  stroke: "red"
});

var lineE = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  closed: true,
  tension: 2.2,
  fill: "lightblue",
  stroke: "black"
});

lineB.move({
  x: 180,
  y: 40
});

lineC.move({
  x: 380,
  y: 0
});

lineD.move({
  x: 0,
  y: 200
});

lineE.move({
  x: 180,
  y: 220
});

layerA.add(lineA, lineB, lineC, lineD, lineE);

stage.add(layerA);

You should also note that the red and blue lines are plotted using the same set of points, but a different tension value significantly changes the final shape of the curve.

Drawing Regular Polygons

You can carefully choose the value of different points in the points array to draw regular polygons like pentagons and hexagons. Drawing more complex regular polygons like octagons using this method can be cumbersome and error prone. To avoid errors, you should use the Konva.RegularPolygon() object to create regular polygons.

The x and y properties are used to specify the center of the polygon. The radius property is used to specify the distance between the center point of the polygon and all its vertices. You can use the sides property to specify the number of sides that the polygon should have. Keep in mind that all the sides of a polygon created using this method will have equal lengths. You can change the length of some sides using the scaleX and scaleY properties, but it will also change the stroke width of the scaled side.

Just like all other shapes that we have discussed, you can change the stroke width, opacity and visibility of regular polygons using strokeWidth, opacity, and visibility.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var triangle = new Konva.RegularPolygon({
  x: 150,
  y: 275,
  sides: 3,
  radius: 100,
  scaleY: 1.6,
  stroke: "black",
  fill: "rgba(200,0,200, 1)",
});

var square = new Konva.RegularPolygon({
  x: 60,
  y: 60,
  sides: 4,
  radius: 50,
  fill: "rgba(200,0,0, 0.5)",
  stroke: "black"
});

var pentagon = new Konva.RegularPolygon({
  x: 160,
  y: 160,
  sides: 5,
  radius: 80,
  fill: "rgba(0,200,0, 0.5)",
  stroke: "black"
});

var hexagon = new Konva.RegularPolygon({
  x: 350,
  y: 120,
  sides: 6,
  radius: 80,
  fill: "rgba(0,0,200, 0.5)",
  stroke: "black"
});

var octagon = new Konva.RegularPolygon({
  x: 450,
  y: 275,
  sides: 8,
  radius: 100,
  fill: "rgba(200,200,0, 0.5)",
  stroke: "black"
});

layerA.add(triangle, square, pentagon, hexagon, octagon);

stage.add(layerA);

Final Thoughts

In this tutorial, we have covered the most basic shapes that Konva allows us to draw on the canvas with ease. We also learned about different attributes that can be used to control the appearance of all these shapes. Most of the attributes are common to all shapes, but some of them are only applicable on specific shapes.

If you have any questions, please let me know in the comments. We will learn about some more complex shapes in the next tutorial of the series.