diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)


HTML5 Canvas tag for Creating CSS-based Black & White Image Effects

Marco Lisci has written a tutorial on creating a black and white image effect using the HTML5 Canvas tag. The heart of his tutorial is using getImageData() and looping through the red, green, blue, and alpha values of each pixel to change it’s luminance formula: red x 0.3 + green x 0.59 + blue x 0.11. This formula calculates the luminance of a color as it’s perceived by the human eye, so the green channel has more importance than the red and the blue.

“The new canvas tag in HTML5 is known for its illustration power. It’s basically an empty element on which you can write and sketch using Javascript. But there’s a hidden power: image manipulation. With canvas you can perform operations on pixel based artworks. You can write a new image pixel by pixel or import an image in the canvas and modify it as you need.”

Canvas Source


More Info: TML5 Canvas Image Effects: Black & White


Share This Story, Choose Your Platform!

Get Latest News

Subscribe to Digital News Hub

Get our daily newsletter about the latest news in the industry.
First Name
Last Name
Email address
Secure and Spam free...