Chapter 1 Post Exercises


Sorry for the delay, I know I missed last Friday. I will however be putting out this post and the pre-section prep today. So with out further ado today, I will be giving a set of exercises. You will be able to see the Canvas result but no code. The Task for you is to recreate a near facsimile of the canvas. No it doesn't have to be perfect. Just get as close as you can. Now yes, you could look at the code on the github page I use to store things on for this blog. I would suggest you don't do this. You would only be hurting yourself in the end. The exercises will go from easy to hard and as always if you have any questions leave a comment on here or on reddit and I will be happy to help where I can.

Exercise 1 Basic Shapes

Create a Square a Circle a Triangle and an Oval near the center of the page:

Exercise 2 Working with Lines and Paths

Draw a complex object using moveTo, lineTo, bezierCurveTo, and quadraticCurveTo. It doesn't have to be the same shape I am drawing (which is probably good, I am a programmer not an artist) however it does need to be more complex than a traiangle or a square. You could draw a flower, or a house with windows, or a blimp. Just something that will take several calls to these methods. Prefereably something that you can use all four to create.

Exercise 3

Draw two gradients a clipping region with an image inside of it. You can use what ever image you would like. There may be an issue with this iframe below. If so please go to this page:

ex3 demo view

Exercise 4

Lastly, create two shapes use transform on the shapes to skew them overlap them and use globalCompositeOperations to set the overlap to lighter.


Congratulations you have taken your first step into a larger world. See that wasn't so bad no was it. Now that you are done we can move on to basic animation in canvas. Go on to the next chapter I'll be there waiting. For those of you that understand the concepts in the pre section prep you can go ahead and skip it and we will see you in about a week.

1,144 0 0