<div class="editor" />

body {
  margin: 0;
  padding: 0;
}

.editor {
  width: 100%;
  height: 100vh;
  background: #eee;
}

import * as pikaso from "https://cdn.skypack.dev/[email protected]";

const editor = new Pikaso({
  container: document.querySelector('.editor'),
  selection: {
    transformer: {
      borderStroke: '#262626',
      anchorColor: '#262626',
      anchorStroke: '#262626',
      anchorFill: '#262626',
      anchorSize: 10
    }
  },
  measurement: {
    background: {
      fill: 'purple',
      cornerRadius: 5
    },
    text: {
      fill: '#fff',
      padding: 5,
      fontSize: 14,
      fontStyle: 'bold'
    }
  }
})

const rect = editor.shapes.rect.insert({
  x: editor.board.stage.width() / 2 - 125,
  y: editor.board.stage.height() / 2 - 70,
  width: 250,
  height: 140,
  fill: 'red'
})

rect.select()