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 |
|---|---|
This topic explains how you can use HTML5 Canvas to put photographs into different shapes and create visual special effects for web designs. |
|
This topic explains how you can use HTML5 Canvas to add a texture to a photograph for artistic effect. |
|
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. |
|
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. |
|
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.