Canvas Layers Architecture

The main challenge with creating a layer system is that the library we are using to generate shapes (Konva.js) renders objects on an HTML canvas while the custom objects render as separate HTML elements. Since an HTML canvas is displayed as a single PNG image in the browser this means that custom objects could either be rendered in front of or behind all Konva objects, but not in between them. The following are a couple ways we could solve this problem.

Separate Layering Options

The first solution is to have separate layer options for custom objects and Konva objects. Konva objects would have normal Up / Down options and could move between each other on the HTML canvas. The custom objects would instead have Send to Back / Send to Front options which would put the object in front or behind the HTML canvas.

Each Konva object has it's own HTML canvas

By rendering each Konva object on a different canvas we can then order the HTML elements to create layers. This could be somewhat slower with a large number of objects.

Use a different library

We could try to use a different library for graphics than Konva.js, but I couldn't find any library that would easily let us do layers with HTML elements and canvas elements.