How to set filters properly in Konva?

Question

I have a function that gets hex color and returns an object in the following format:

{
  brightness: "88%"
  contrast: "94%"
  hue: "165deg"
  invert: "42%"
  saturate: "2371%"
  sepia: "12%"
}

I've tried this, but the color is wrong.

<Image
  ref={imgRef}
  x={props.x}
  y={props.y}
  width={props.width}
  height={props.height}
  image={image}
  draggable={false}
  filters={[Konva.Filters.Blur, Konva.Filters.HSL, Konva.Filters.Invert, Konva.Filters.Sepia, Konva.Filters.Brighten, Konva.Filters.Contrast]}
  invert={0.42}
  sepia={0.12}
  saturate={23.71}
  hue={165}
  brightness={0.88}
  contrast={0.94}
/>

Property set is the same all the time. What should be changed to work properly?

Hello, welcome to stackoverflow. Please checkout [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) before asking a question. Clearly indicate the problem, and what you have tried. — Sinan Yaman, Mar 24 '21 at 07:42

score 1 · Answer 1 · answered Mar 24 '21 at 09:19

Konva js apply filter one by one. So order of filter is very important along with it's value.

Suppose you have three filter [invert, sepia, saturate]

when you apply all three filter like this : invert, sepia, saturate and when you apply all three filter like this : invert, saturate, sepia

result of both image will shown with different effect.

So you have to follow proper order for apply each filter.

How to set filters properly in Konva?

1 Answers1