how to feather edges of image in html5 canvas or fabricjs - html5-canvas

Question

<canvas id="canvas" width="300" height="300" style="background:green">
<img id="shape" onload="run()" src="shape.png">
<script>
function run()
{
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const im = document.getElementById('shape');
context.drawImage(im, 0, 0);
}
</script>
how to get feathered edges around the white part of the image for my custom shape.
The green color in the image is transparent.
I tried with shadowblur but that is not what I want
I want to blur edges as if it is fading into background.
I want to do this using html5 canvas or using fabricjs.
Note : The shape is not circle or oval. It is a custom hand drawn shape.

Answer 1

You can draw your shape with a CSS blur() filter and then use that as a mask.
If you need to support Safari, which still doesn't support ctx.filter (and maybe will never...) you can actually do the same with shadows, the trick is to render the mask outside of the visible viewport and add a huge offset on the shadow.
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const mask = new Image();
// using #obscure's image
mask.src = "https://i.stack.imgur.com/tyKHb.png";
const img = new Image();
img.src = "https://picsum.photos/200/200";
Promise.all([
mask.decode(),
img.decode()
]).then(draw);
function draw() {
canvas.width = img.width;
canvas.height = img.height;
if (ctx.filter === "none") {
ctx.filter = "blur(5px)";
ctx.drawImage(mask, 0, 0);
ctx.filter = "none";
}
else { // thanks Safari
ctx.shadowOffsetX = 200;
ctx.shadowBlur = 5;
ctx.shadowColor = "black";
ctx.drawImage(mask, -200, 0);
}
ctx.globalCompositeOperation = "source-in";
ctx.drawImage(img, 0, 0);
}
<canvas></canvas>

Answer 2

There are quite a few steps involved to accomplish this task.
Say we have a hand-drawn shape like this:
First we need to get the outline of the actual shape. As it's a solid single coloured shape we can simply look for non-transparent pixels, or pixels that are above a certain threshold. Based on this data we need to get the contours that form the shape.
Luckily we don't need to re-invent the wheel as this is just what the d3 contours module does and we end up with something like this:
In the next step we need to determine the center point of the shape. This is done by looking through the points data returned in the last step and find the min/max horizontal and vertical values.
let rect = {
x1: Number.MAX_VALUE,
y1: Number.MAX_VALUE,
x2: Number.MIN_VALUE,
y2: Number.MIN_VALUE
};
for (let a = 0; a < points.length; a++) {
rect.x1 = points[a][0] < rect.x1 ? points[a][0] : rect.x1;
rect.y1 = points[a][1] < rect.y1 ? points[a][1] : rect.y1;
rect.x2 = points[a][0] > rect.x2 ? points[a][0] : rect.x2;
rect.y2 = points[a][1] > rect.y2 ? points[a][1] : rect.y2;
}
let center = {
x: (rect.x1 + rect.x2) / 2,
y: (rect.y1 + rect.y2) / 2
};
Finally we fill the inside of the shape and redraw the outlines, say 20 times. With each iteration we enlarge the shape by 1 pixel and reduce the alpha value of the stroke until hitting zero, which will give us:
Now it's just a matter of combining the mask with an image by setting the globalCompositeOperation to 'source-atop'.
Here's the complete example:
let image = new Image();
let mask = new Image();
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
let imagesLoaded = 0;
context.fillStyle = 'rgb(255,0,0)';
image.crossOrigin = 'anonymous';
mask.crossOrigin = 'anonymous';
image.onload = loaded;
mask.onload = loaded;
image.src = 'https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/200/200';
mask.src = 'https://api.codetabs.com/v1/proxy?quest=https://i.stack.imgur.com/tyKHb.png';
function loaded() {
imagesLoaded++;
if (imagesLoaded == 2) {
process();
}
}
function process() {
context.drawImage(mask, 0, 0, image.width, image.height);
let imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
let points = d3.geom.contour((x, y) => {
let a = imageData[(y * canvas.width + x) * 4 + 3];
return (a > 0);
});
context.clearRect(0, 0, canvas.width, canvas.height);
let rect = {
x1: Number.MAX_VALUE,
y1: Number.MAX_VALUE,
x2: Number.MIN_VALUE,
y2: Number.MIN_VALUE
};
for (let a = 0; a < points.length; a++) {
rect.x1 = points[a][0] < rect.x1 ? points[a][0] : rect.x1;
rect.y1 = points[a][1] < rect.y1 ? points[a][1] : rect.y1;
rect.x2 = points[a][0] > rect.x2 ? points[a][0] : rect.x2;
rect.y2 = points[a][1] > rect.y2 ? points[a][1] : rect.y2;
}
let center = {
x: (rect.x1 + rect.x2) / 2,
y: (rect.y1 + rect.y2) / 2
};
let point = {};
for (let a = 0; a < 20; a++) {
context.strokeStyle = 'rgba(255,0,0,' + (1 - a / 20) + ')';
point.x = points[0][0];
point.y = points[0][1];
point.x = point.x < center.x ? point.x -= a : point.x += a;
point.y = point.y < center.y ? point.y -= a : point.y += a;
context.moveTo(point.x, point.y);
for (let b = 1; b < points.length; b++) {
point.x = points[b][0];
point.y = points[b][1];
point.x = point.x < center.x ? point.x -= a : point.x += a;
point.y = point.y < center.y ? point.y -= a : point.y += a;
context.lineTo(point.x, point.y);
}
context.closePath();
if (a == 0) {
context.fill();
}
context.stroke();
}
context.globalCompositeOperation = 'source-atop';
context.drawImage(image, 0, 0, canvas.width, canvas.height);
}
<script type="text/javascript">
let d3 = {
geom: {}
};
</script>
<script src="https://api.codetabs.com/v1/proxy?quest=https://raw.githubusercontent.com/d3/d3-plugins/master/geom/contour/contour.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>