Is there a way to achieve Photoshop-like multiply, difference, etc layer effects with Canvas?

Question

Hi,

The title should say it all, I am looking for a way to achieve Photoshop-like layer effects such as multiply and difference (and screen) for Canvas + JavaScript.

Also, is there a blur effect for Canvas?

Answer 1

(Assuming at least some familiarity with image processing here. If that's not the case, you may want to refine your question or ask another one with a narrower scope.)

Those layer effects are not that hard to achieve. Wikipedia has descriptions of how they work as well as a few pointers. For multiply for example you multiply the values per channel and per pixel and divide the result by 255.

As for blur, that's usually done with a simple convolution. See for example, Wikipedia again. Basically what you do when convolving a signal is to look at the neighborhood of a single pixel with varying weights (for a Gaussian blur those weights form the shape of a normal distribution in 2D). A simply box blur could use the matrix

1 1 1
1 1 1
1 1 1

which would just blur each pixel with its directly surrounding ones. Perform this three times on the image and you get a good approximation of a Gaussian blur as well.