Konva – offscreen / ghost canvas

I had always created Konva stages by setting the container parameter to the selector of an existing HTML DIV element. Then I needed to create an image from canvas elements as a one-off which I would then draw into the main stage. So how to do that without having a physical, in-the-DOM container DIV?

Looking a the docs and source code for the Stage, it turns out that the container can be an in-the-DOM DIV, or a DIV that we create as a new element that is NOT in the DOM.

let newDiv = document.createElement("div"),
stage = new Konva.Stage({
    container: newDiv,
    width: 400,
    height: 500
});

You can draw shapes into the stage created above, you just can’t see it in the DOM. Unlike HTML DOM elements that are not guaranteed to behave as you might assume when not in the DOM, this Stage (HTML5 canvas) will perform as required for all canvas operations.