0

I am using fabricjs for canvas. I want to have blur effect for the background image. I could show the blur effect but not based on user value as i did not understand the algorithm. Also it takes some second to show the blur effect and is also not so strong.

I did this way

applyBlur(e) {
    const object = this.state.canvas.backgroundImage;
    object.filters[0] = new fabric.Image.filters.Convolute({
              matrix: [ 1/36, 1/36, 1/36,
                        1/36, 1/36, 1/36,
                        1/36, 1/36, 1/36,
                        1/36, 1/36, 1/36,
                        1/36, 1/36, 1/36,
                        1/36, 1/36, 1/36,
                        1/36, 1/36, 1/36,
                        1/36, 1/36, 1/36,
                        1/36, 1/36, 1/36,
                        1/36, 1/36, 1/36,
                        1/36, 1/36, 1/36,
                        1/36, 1/36, 1/36 ]
            });
    object.applyFilters(this.state.canvas.renderAll.bind(this.state.canvas));
  }

How do i show the blur effect based on user provided value?

Serenity
  • 3,884
  • 6
  • 44
  • 87
  • I believe that it's a matrix 3x3 not 3x12 in fabricjs – neopheus Jan 18 '17 at 12:40
  • 3*3 matrix does not give strong blur effect. That is why i used 3 * 13 which gives strong blur effect but could not use it based on user input value. – Serenity Jan 20 '17 at 02:22

0 Answers0