var canvas = new Malyan({

    id: 'canvas',

    width: 500,

    height: 500,

  })

​

  var rect_1 = new Malyan.Rect({

    name: 'rect_1',

    x: 0,

    y: 0,

    width: 60,

    height: 80,

    fillStyle: 'rgba(64, 196, 255, 0.2)',

    strokeStyle: '#40c4ff',

    lineWidth: 2,

  })

  rect_1.translation = { x: 100, y: 100 }

  canvas.add(rect_1)

​

  var rect_2 = new Malyan.RoundRect({

    name: 'rect_2',

    x: 0,

    y: 0,

    width: 60,

    height: 80,

    radius: 8,

    fillStyle: 'rgba(255, 69, 0, 0.2)',

    strokeStyle: '#FF4500',

    lineWidth: 2,

  })

  rect_2.translation = { x: 350, y: 100 }

  rect_2.rotation = Math.PI * 0.25

  canvas.add(rect_2)

​

  var group_1 = new Malyan.Group({

    name: 'group_1'

  })

  group_1.translation = { x: 120, y: 330 }

  canvas.add(group_1)

  var rect_3 = new Malyan.Rect({

    name: 'rect_3',

    x: 0,

    y: 0,

    width: 60,

    height: 80,

    fillStyle: 'rgba(84, 188, 169, 0.2)',

    strokeStyle: '#54bca9',

    lineWidth: 2,

    center: true

  })

  group_1.add(rect_3)

​

  var speed = 0.005

  function updateRect() {

    if (rect_3.scale.x < 0.6 || rect_3.scale.x > 1.2) {

      speed = speed * -1

    }

    rect_3.scale = rect_3.scale.x + speed

  }

​

  var group_2 = new Malyan.Group({

    name: 'group_2'

  })

  group_2.translation = { x: 350, y: 330 }

  canvas.add(group_2)

  var rect_4 = new Malyan.Rect({

    name: 'rect_4',

    x: 0,

    y: 0,

    width: 60,

    height: 80,

    fillStyle: 'rgba(186, 85, 211, 0.2)',

    strokeStyle: '#BA55D3',

    lineWidth: 2,

    center: true

  })

  group_2.add(rect_4)

​

  var box = new Malyan.Polygon({

    points: getBoxPoints(),

    strokeStyle: '#999',

    lineDash: [10, 5],

    fill: false

  })

  canvas.add(box)

​

  function getBoxPoints() {

    var vertices = rect_4.getVertices()

    var canvasPoints = vertices.map(v => {

      var vertex = rect_4.calcPixelToCanvasCoordinatePoint(v)

      return [vertex.x, vertex.y]

    })

    var boundingRect = Malyan.math.calcPointsRect(canvasPoints)

    return [

      [boundingRect.left, boundingRect.top],

      [boundingRect.right, boundingRect.top],

      [boundingRect.right, boundingRect.bottom],

      [boundingRect.left, boundingRect.bottom]

    ]

  }

  function updateBox() {

    var paths = getBoxPoints()

    box.updatePaths(paths)

  }

​

  function animateLoop() {

    updateRect()

    group_2.rotation = group_2.rotation + 0.01

    updateBox()

    canvas.render()

    requestAnimationFrame(animateLoop)

  }

  animateLoop()