"This world is but a canvas to our imagination."
– Henry David Thoreau
In the previous chapter we learned the basics of using the HTML5 canvas. We created a drawing application called Canvas Pad with tools to draw lines and shapes in all different colors and sizes. In this chapter we will continue our exploration of the Canvas API by extending Canvas Pad to add more tools. Then we will create a new application called Photo Pad where we will take a look at how to load images using the File API and perform image processing by accessing and modifying the individual pixels of the canvas.
In this chapter we will learn:
- How to get text input and draw it to the canvas
- How to use the Canvas API transformation functions to change how items are drawn on the canvas
- How to export the canvas image to save it
- How to load images using the HTML5 File API
- How to draw bitmap images to the canvas
- How to get the data for each pixel in a canvas, manipulate it, and put it back
There are two methods available to draw text on the canvas: strokeText() and fillText(). strokeText() draws outlined text using the current lineWidth and strokeStyle, while fillText() draws with the current fillStyle. Both take the same parameters; the text to draw, and the x and y coordinates. The context object has a global font property to define which font to use. You set its value the same you would when defining a font in CSS. Continuing where we left off in the previous chapter with our Canvas Pad application, we will add a new text drawing tool. You can find the source code for this section in Chapter 5/example5.1.