How to make canvas sketch transparent png for freezing

Question

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

jsfiddle

The canvas tag should omit the transparent

and make it have a light effect?

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

Answer 1

Make a glow on the canvas using a series of overlapping shadows with increased blur.

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

You can change the glow style by changing the number of overlays and the blur size.

Sample code for the 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 of the image of your phone, you can use the marching ants algorithm.

This algorithm will create a path describing the image.

In your case, you define the image as all opaque pixels.

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

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

It is used as follows:

Draw your phone on canvas.

 // draw the image // (this time to grab the image pixel data ctx.drawImage(img,0,0); 

Get an array of pixel colors from the canvas using ctx.getImageData p>

 // grab the image pixel data imgData=ctx.getImageData(0,0,canvas.width,canvas.height); data=imgData.data; 

Define a function that checks the pixel array for opaque pixels on 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 loop 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 is an example:

• glow is automatically generated using overlapping shadows

• The telephone path contour is calculated using the marching ant algorithm