Using a background image in Konva Layer or Stage

Question

How can I add a background image to my Stage or Layer when using Konva with VueJS?

I have tried applying fillPatternImage in config on both layer and stage with no effect. I can't find anything on this in the docs, except maybe adding a big rectangle in one of the layers and filling that. Any ideas how to do this?

Here is some code where I use it on a single shape. Can I do something similar but on layer/group/stage level to set a background?

<v-stage
  ref="stage"
  :config="configKonva"
>
  <v-layer v-if="image" ref="layer">
    <v-regular-polygon
      v-for="item in list"
      :key="item.id"
      :config="{
        x: item.x,
        y: item.y,
        sides: 6,
        rotation: item.rotation,
        id: item.id,
        numPoints: 5,
        radius: 30,
        outerRadius: 50,
        opacity: 0.8,
        fillPatternImage: image,
        fillPatternRepeat: 'no-repeat',
        fillPatternOffset: {
...

lavrton · Accepted Answer · 2020-08-31T16:09:47.630

stage, layer and group do not have fillPatternImage property. Only shapes have that property: https://konvajs.org/api/Konva.Shape.html#fillPatternImage

That is why it is recommended to add a background rectangle shape.

Also, you can add a background image with CSS into stage container (but such background will be not exported into the image if you try to export canvas content with Konva methods)

Take a look here for some demos: https://konvajs.org/docs/sandbox/Canvas_Background.html

Using a background image in Konva Layer or Stage

1 Answers1