Manipulating HTML5 Canvas Using Konva: Part 3, Complex Shapes and Sprites

Manipulating HTML5 Canvas Using Konva: Part 3, Complex Shapes and Sprites

In the second tutorial of this series, you learned how to draw basic shapes using Konva. You can combine the basic shapes one way or another to create stars, rings, arrows, clocks, or a hut. Konva also allows you to create some common complex shapes by using built-in functions provided by the library. 

In this tutorial, you will learn how to create stars and rings in Konva. After that, we will discuss how to write text using Konva and how to write it along a specific path. You will also learn how to draw images and sprites on a canvas using Konva.

Drawing Stars and Rings

Compared to a lot of other complex shapes that you can draw on the canvas, a star shape is one of the most common. With the right set of values, you can also turn pointy stars into simple badge-like shapes. Konva allows you to draw stars using the Konva.Star() object.

You can specify the number of spikes that a star should have using the numPoints property. You can control the size of those spikes using the innerRadius and outerRadius properties. A large difference in the value of these properties will make the stars more spiky. Setting the outer radius equal to the inner radius will create a regular polygon with the number of sides double the value of numPoints. Varying the values of numPoints, innerRadius, and outerRadius can result in some interesting shapes.

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();

var starA = new Konva.Star({
  x: 70,
  y: 80,
  numPoints: 4,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(200,0,200, 1)",
});

var starB = new Konva.Star({
  x: 200,
  y: 100,
  numPoints: 8,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(0, 0, 200, 1)",
});

var starC = new Konva.Star({
  x: 475,
  y: 175,
  numPoints: 20,
  innerRadius: 90,
  outerRadius: 100,
  stroke: "orange",
  fill: "yellow",
});

var starD = new Konva.Star({
  x: 325,
  y: 75,
  numPoints: 5,
  innerRadius: 20,
  outerRadius: 40,
  stroke: "black",
  fill: "lightgreen",
});

var starE = new Konva.Star({
  x: 100,
  y: 250,
  numPoints: 25,
  innerRadius: 25,
  outerRadius: 80,
  stroke: "black",
  fill: "white",
});

var starF = new Konva.Star({
  x: 300,
  y: 275,
  numPoints: 40,
  innerRadius: 5,
  outerRadius: 80,
  stroke: "black",
  fill: "black",
});

layerA.add(starA, starB, starC, starD, starE, starF);

stage.add(layerA);

As usual, you can rotate and scale the star shapes that you create using the rotation, scale, scaleX, and scaleY properties. Similarly, you can control the opacity of a star using the opacity property and show or hide it with the help of the visible property.

Rings in Konva consist of a bigger solid circle and a smaller hollow circle laid over it. The radius of the inner circle is specified using the innerRadius property, and the radius of the outer circle is specified using the outerRadius property. The x and y properties control the position of the center of the star.

You can scale and rotate the rings that you create using the scaleX, scaleY, scale, and rotation properties. However, keep in mind that rotation won't seem to have any effect unless you have scaled the ring with different magnitudes in the x and y direction.

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();

var ringA = new Konva.Ring({
  x: 125,
  y: 100,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(200,0,200, 1)",
});

var ringB = new Konva.Ring({
  x: 200,
  y: 100,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(0, 0, 200, 0.5)",
});

var ringC = new Konva.Ring({
  x: 475,
  y: 175,
  innerRadius: 90,
  outerRadius: 100,
  stroke: "orange",
  fill: "yellow",
});

var ringD = new Konva.Ring({
  x: 325,
  y: 100,
  innerRadius: 20,
  outerRadius: 40,
  scaleY: 2,
  scaleX: 0.3,
  rotation: 45,
  stroke: "black",
  fill: "lightgreen",
});

var starA = new Konva.Star({
  x: 200,
  y: 275,
  numPoints: 20,
  innerRadius: 50,
  outerRadius: 115,
  stroke: "black",
  fill: "black",
});

var ringE = new Konva.Ring({
  x: 200,
  y: 275,
  innerRadius: 10,
  outerRadius: 90,
  stroke: "black",
  fill: "red",
});

var starB = new Konva.Star({
  x: 200,
  y: 275,
  numPoints: 10,
  innerRadius: 50,
  outerRadius: 80,
  stroke: "black",
  fill: "white",
});

var starC = new Konva.Star({
  x: 200,
  y: 275,
  numPoints: 10,
  innerRadius: 25,
  outerRadius: 50,
  stroke: "black",
  fill: "orange",
});

var ringF = new Konva.Ring({
  x: 200,
  y: 275,
  innerRadius: 10,
  outerRadius: 20,
  stroke: "black",
  fill: "white",
});

layerA.add(ringA, ringB, ringC, ringD, starA, ringE, starB, starC, ringF);

stage.add(layerA);

In the following example, I have overlaid multiple star and ring shapes together to create a nice pattern. The three stars and two rings in the pattern are concentric. Keep in mind that whenever you are trying to create something like this, always draw the biggest shape first. If I had added starA later to the layer, it would have covered all the smaller rings and stars, hiding them from the viewers.

Text and TextPath in Konva

You can write text on a canvas using the Konva.Text() object. When creating a text object, you can specify the value for font family, font size, font style, and font variant using the fontFamily, fontSize, fontStyle, and fontVariant properties. The default font family is Arial, and the default font size is 12. You can set the fontStyle property to normal, bold, or italic. Similarly, fontVariant can be set to either normal or smallcaps. 

The actual text that you want to write can be specified using the text property. If there is not enough space between lines in a multi-line comment, you can increase it using the lineHeight property.

The top-left point from which Konva should start writing the text is specified using the x and y properties. You can limit the width of the text using the width property. Any text that you write will be left aligned by default. You can align it to right or center using the align property.

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();

var textA = new Konva.Text({
  y: 25,
  width: canvasWidth,
  align: 'center',
  text: "QUOTE OF THE DAY",
  fontSize: 50,
  fontFamily: "Lato"
});

var textB = new Konva.Text({
  x: canvasWidth/10,
  y: 175,
  width: canvasWidth*8/10,
  align: 'center',
  lineHeight: 1.4,
  text: "You've gotta dance like there's nobody watching,\n Love like you'll never be hurt,\n Sing like there's nobody listening,\n And live like it's heaven on earth.",
  fontSize: 25,
  fontFamily: "Lato"
});

var rectA = new Konva.Rect({
  x: canvasWidth/10 - 10,
  y: 140,
  width: canvasWidth*8/10 + 20,
  height: 240,
  stroke: "black",
  fill: "brown"
});

var rectB = new Konva.Rect({
  x: canvasWidth/10,
  y: 150,
  width: canvasWidth*8/10,
  height: 220,
  stroke: "black",
  fill: "lightblue"
});

var starA = new Konva.Star({
  x: canvasWidth/10,
  y: 150,
  innerRadius: 40,
  outerRadius: 30,
  numPoints: 10,
  stroke: "black",
  fill: "orange"
});

layerA.add(textA, rectA, starA, rectB, textB);

stage.add(layerA);

In the above example, you should note that I have added textB to the layer after adding all other elements. This way we can make sure that the actual quote stays on top of all other shapes.

The text that you write on the canvas doesn't have to follow straight lines. You can also provide a path for the text to follow using the data property. The path is provided in the form of an SVG data string and can include commands to follow lines, curves, and arcs. 

One important thing you should remember is that the text which you want to write along a specific path has to be created using the Konva.TextPath() object. Here is an example that provides the path for the text to follow in the form of a Cubic Bezier curve.

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();

var textA = new Konva.TextPath({
  y: 25,
  align: 'center',
  data: 'M100,300 C150,100 200,50 500 60',
  text: "THIS TEXT GOES ALONG A PATH",
  fontSize: 35,
  fontFamily: "Lato",
  fill: "orange"
});

var textB = new Konva.TextPath({
  y: 28,
  align: 'center',
  data: 'M100,320 C200,200 400,400 500 80',
  text: "THIS TEXT GOES ALONG ANOTHER PATH",
  fontSize: 25,
  fontFamily: "Lato",
  fill: "green"
});

layerA.add(textA, textB);

stage.add(layerA);

Drawing Images and Sprites Using Konva

You should now be able to create a variety of shapes using the methods that we have discussed in this and the previous tutorial, but sometimes it makes more sense to directly use an image when trying to draw a graphic on the canvas. Konva allows you to draw images using the Konva.Image() object. 

The position of the top-left corner of an image is determined by the value of the x and y properties. Similarly, its width and height are specified using the width and height properties. The values of the width and height properties don't have to be equal to the actual dimensions of the image. You can also scale or rotate the image using the rotation, scale, scaleX, and scaleY properties.

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();

var theImage = new Image();
theImage.src = "path/to/the/image.jpg";

theImage.onload = function() {
  var field = new Konva.Image({
    x: 35,
    y: 115,
    image: theImage,
    width: 500,
    height: 250,
    rotation: -10,
    stroke: "black",
    strokeWidth: 15
  });

  layerA.add(field);
  stage.add(layerA);
};

It is worth noticing that in the above code, I instantiated the Konva.Image() object after the image had already loaded. Trying to instantiate the Konva.Image() object before the image has loaded will result in an error. The image of the field has been taken from Pixabay.

Konva also allows you to render sprites on the canvas with the help of the Konva.Sprite() object. The only difference is that this time you have to use the animation and animations keys in addition to the image key that we used earlier while rendering the image.

The animation key accepts a string that specifies the id of the animation to be played. The animations key accepts an object that stores the animation map for the sprite as its value. You can control the rate at which a sprite animation should be played using the frameRate property.

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();
var theSprite = new Image();

theSprite.src =
  "path/to/hero_spritesheet.png";

var animations = {
  standing: [0, 0, 80, 94],
  walking: [0, 94, 80, 94,
           80, 94, 80, 94,
           160, 94,  80, 94,
           240, 94, 80, 94,
           320, 94, 80, 94,
           400, 94, 80, 94],
  jumping: [0, 282, 80, 94,
           80, 282, 80, 94,
           160, 282, 80, 94]
};

theSprite.onload = function() {
  var heroA = new Konva.Sprite({
    x: 50,
    y: 50,
    image: theSprite,
    animation: 'standing',
    animations: animations,
    frameRate: 6,
    frameIndex: 0
  });
  
  var heroB = new Konva.Sprite({
    x: 50,
    y: 150,
    image: theSprite,
    animation: 'walking',
    animations: animations,
    frameRate: 6,
    frameIndex: 0
  });
  
  var heroC = new Konva.Sprite({
    x: 50,
    y: 250,
    image: theSprite,
    animation: 'walking',
    animations: animations,
    frameRate: 60,
    frameIndex: 0
  });
  
  var heroD = new Konva.Sprite({
    x: 275,
    y: 150,
    scale: 2,
    image: theSprite,
    animation: 'jumping',
    animations: animations,
    frameRate: 2,
    frameIndex: 0
  });

  layerA.add(heroA, heroB, heroC, heroD);
  stage.add(layerA);
  
  heroA.start();
  heroB.start();
  heroC.start();
  heroD.start();
};

The width and height of our hero sprite are 80px and 94px respectively. I have used these values to tell Konva the position of a sprite that should be shown while playing a specific animation sequence. Each animation sequence has been given an id to identify what the hero is doing. This id is used later when you want to tell Konva which animation it should play. Just like the previous example, I have instantiated the hero after the image loads in order to avoid errors. 

The hero sprite sheet that we are using in the demo was created by tokka. I have also used the same image in the Crafty Beyond the Basics: Sprites tutorial to create a sprite animation. The tutorials in that series show you how to create a simple 2D game using Crafty.

Coming back to Konva, the following example shows a walking and jumping hero animation. The hero at the bottom has a higher frameRate value, which makes it appear as if the hero is running at superhuman speeds.

Final Thoughts

After completing the second and third tutorials, you should now be able to create a lot of shapes, patterns, and designs by yourself using Konva. The last section also showed you how to draw images and sprites on your canvas. This ought to cover all your drawing-related needs.

If you have any questions related to this tutorial, I would be glad to help. The next tutorial will teach you how to fill your shapes with gradients and how to apply shadows on anything that you draw on the canvas.