how to make canvas outline a transparent png for on hover glow

Question

Is it possible to give a glow effect to an image automatically, say using canvas?

jsfiddle

The canvas tag would have to omit the transparent

and make it have an outter glow?

<canvas id="canvas" width=960 height=960></canvas>

Answer 1

Make a canvas path glow by applying a series of overlapping shadows with increasing blur

A Demo: http://jsfiddle.net/m1erickson/Z3Lx2/

You can change the styling of the glow by varying the number of overlays and the blur size.

Example code for a glow effect:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// glow
var glowColor="blue";

ctx.save();
ctx.strokeStyle = glowColor;
ctx.shadowColor = glowColor;
ctx.shadowOffsetX=300;
for (var i = 0; i < 10; i++) {
    ctx.shadowBlur = i * 2;
    ctx.strokeRect(-270, 30, 75, 150);
}
ctx.restore();

To get the outline path of your phone image, you can use the "marching ants" algorithm.

This algorithm will create a path that outlines an image.

In your case you would define the image as all pixels that are not transparent.

Here's a very good implementation of "marching ants" that is used in the excellent d3 library:

https://github.com/d3/d3-plugins/blob/master/geom/contour/contour.js

It's used like this:

DrawImage your phone on the canvas.

// draw the image
// (this time to grab the image's pixel data

ctx.drawImage(img,0,0);

Get the pixel color array from the canvas using ctx.getImageData

// grab the image's pixel data

imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
data=imgData.data;

Define a function that checks the pixel array for non-transparent pixels at any x,y on the canvas.

// This is used by the marching ants algorithm
// to determine the outline of the non-transparent
// pixels on the image

var defineNonTransparent=function(x,y){
    var a=data[(y*cw+x)*4+3];
    return(a>20);
}

Call the contour function:

// call the marching ants algorithm
// to get the outline path of the image
// (outline=outside path of transparent pixels

var points=geom.contour(defineNonTransparent);

Here's an example result:

• the glow is automatically generated using overlapping shadows

• the outline path of the phone is calculated using the marching ants algorithm