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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: