<h2>Groups in Konva</h2>
<div id="example"></div>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  width: 600px;
  text-align: center;
}

#example {
  width: 600px;
  height: 400px;
  box-shadow: 0 0 1px #ddd, 0 2px 2px #aaa;
  border-radius: 5px;
  margin: 20px 0;
}
var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();

var wheelA = new Konva.Ring({
  x: 130,
  y: 230,
  innerRadius: 5,
  outerRadius: 30,
  fill: "gray",
  stroke: "black",
  name: "First Wheel"
});

var wheelB = new Konva.Ring({
  x: 270,
  y: 230,
  innerRadius: 5,
  outerRadius: 30,
  fill: "gray",
  stroke: "black",
  name: "Second Wheel"
});

var frameA = new Konva.Rect({
  x: 80,
  y: 150,
  width: 240,
  height: 60,
  cornerRadius: 10,
  fill: "red",
  stroke: "black",
  name: "Bottom Frame"
});

var frameB = new Konva.Rect({
  x: 135,
  y: 90,
  width: 120,
  height: 60,
  cornerRadius: 10,
  fill: "orange",
  stroke: "black",
  name: "Top Frame"
});

var carA = new Konva.Group({
  x: 50,
  y: 0,
  rotation: 20,
  scaleX: 1.2
});

carA.add(wheelA, wheelB, frameA, frameB);

layerA.add(carA);

stage.add(layerA);

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/konva/1.7.6/konva.min.js