I am trying to apply grayscale and sepia filters on canvas at the time of mouseMove. Am using CanvasRenderingContext2D.filter for applying the filters. Here's the sample code
var radgrad = this.ctx.createRadialGradient(x, y, 50 / 8, x, y, 50 / 2);
radgrad.addColorStop(0, 'rgb(0, 0, 0)');
radgrad.addColorStop(1, 'rgb(0, 0, 0, 1)');
this.ctx.filter = "grayscale(100%) blur(5px) opacity(50%)";
this.ctx.fillStyle = radgrad;
this.ctx.beginPath();
this.ctx.arc(x, y, 50, 0, Math.PI * 2);
this.ctx.fill();
Problem is when I am trying to apply grayscale am not able to achieve it but the blur(5px)
is getting applied.
Any solution how to apply grayscale or sepia filter in the above method.
Any lead on the solution will be helpful. Thanks
rgb(0, 0, 0, 1)
is not valid. – Kaiido Dec 17 '19 at 6:32