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?
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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?
(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
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.