How to Create Canvas Special Effects

This tutorial explains how to use HTML5 Canvas to create photographic special effects for web graphics.

In this section

Topic Description

Using Canvas to Make Photos into Shapes

This topic explains how you can use HTML5 Canvas to put photographs into different shapes and create visual special effects for web designs.

Using Canvas to Add Texture to Photos

This topic explains how you can use HTML5 Canvas to add a texture to a photograph for artistic effect.

Using Canvas to Change Photo Colors

This topic explains how to use HTML5 Canvas to change one or more colors in a photograph, which creates dramatic images to enhance webpage designs.

Using Canvas to Create Transparent Photos

This topic explains how to use HTML5 Canvas to create a transparent version of a photograph that can be used in game graphics or webpage designs.

Using Canvas to Turn Color Photos to Black and White

This topic explains how to use HTML5 Canvas to turn a color photograph into a black-and-white one to create artistic or antique effects for web illustrations.

 

HTML5 Canvas uses pixels to develop graphic imagery on the screen. This section demonstrates five Canvas techniques for manipulating pixels to create photographic special effects. You can use these techniques to produce unique images that provide information or artistic interest to your websites, blogs, video game art, advertisements, illustrations, and more.

There are five stand-alone annotated code samples included in this tutorial that show you how these techniques can enhance a photographic image of an American Kestral falcon. These samples explain how to: put the photo of the falcon into a circle shape; add a snow texture to the background; dramatically change the color composition; make the image transparent; and turn the entire photo from color to black and white.

Canvas is a valuable tool for developing photographic special effects because it operates in immediate mode to render pixels directly to the screen. Immediate mode allows you to read and write every pixel on the canvas, making it possible to create complex visual effects through pixel manipulation. When a photograph is imported and drawn, Canvas translates the picture to an array of colored pixels that are composed of red, blue, green, and alpha (which determines opacity) values. Because you can change the color of individual pixels, and draw points, lines, and shapes into the pixel array, photographic effects are easy to do in Canvas. This section shows you how to use these features and it includes discussion material that explains them in more detail. The code samples have been written in JavaScript and HTML5 Canvas. They were designed to be very simple in order to show the basic principles of how to use Canvas. This code can be easily expanded to develop your own customized photographic effects to enhance your web applications.

HTML5 Canvas