#StackBounty: #javascript #image-processing #canvas #html5-canvas #createjs Apply grayscale and sepia filters on mousemove – canvas

Bounty: 50

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.

Here’s a sample fiddle

Any lead on the solution will be helpful. Thanks


Get this bounty!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.