Integrating images into our art
Lucky for us, we don't need to start from scratch always and we can leave the more complex art for external images. Let's figure out how we can integrate images into our canvas.
Getting ready
We've been in a flag theme in this chapter and getting another flag under our belt sounds real good to me right now. So let's turn our heads to Haiti and get their flag up and running. To create this flag, we need to have the image of the symbol that is placed in the center of the flag.
In the source files, you will find an image of the center graphic (at img/haiti.png). By the way, when integrating art into canvas it's always best to avoid resizing the image whenever possible via code to preserve the image quality.
How to do it...
We will prepare the background to match the flag and then put the entire image above it in the center of the canvas/flag:
Follow the basic steps that we need to access the canvas. Set the width, height, and the actual context:
var canvas = document...
