main.css

* {
  margin: 0;
  padding: 0;
  overflow: none;
}

body {
  width: 100vw;
  height: 100vh;
}

div#canvas-container {
  size: *;
  background: red;
}

div#canvas {
  overflow: scroll;
  size: *;
  background-size: 50dip 50dip;
  background-color: white;
  /* https://stackoverflow.com/a/47289810/13378247 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgb(128, 128, 128)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E");
}

div.layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100;
  height: 100;
}

div.layer:not(.current) {
  z-index: 50;
}

div.layer.current {
  z-index: 99;
}

div.rectangle-select {
  z-index: 999;
  left: 0px;
  top: 0px;
  position: absolute;
  height: 100px;
  width: 200px;
  border: 1dip solid black;
  outline: 1dip dashed white;
  outline-offset: -1dip;
}