Creating an Individual Shape

What we need to do is create individual shapes - shapes whose properties don’t bleed into each other and cause a weird mashup like you saw previously. The solution to our problem is pretty simple. Everybody, say hello to the beginPath method:

The beginPath method is called on your drawing context object (just like almost all of the methods we’ve seen so far!), and this method is responsible for telling your canvas that a new shape is about to be started. If we want to display multiple shapes, simply put a call to beginPath just before you are starting up your new shape.

This means, the solution to our multiple shapes situation from earlier would look as follows:

Notice that all we did as add a beginPath method before each individual shape we wished to draw.

Pretty simple, right? Who knew that the solution to our problem was nothing more than a call to beginPath?