This new post is an html5 implementation of my older
flash demo of applying a linear blur,
e.g. to blur an image in such a way that some areas in it remain sharp.
The solution in the new one is however slightly different: instead of sampling nearby pixels, I have used context.setTransform() with a Matrix defined so that the same effect is achieved. The old flash demo had only a linear mode, here’s also added a radial or circular version.
The aligning of three source points (p0,p1 and p2) with three destination points (q0,q1 and q2) is calculated by solving a matrix equation. Each point form a row in the matrices. Parameters a,b,c,d,e and f refer to parameters of context.setTransform():
View the Source Code.