Project 4

Two new functions that were introduced in this chapter were the save() and restore(). What these functions do is that they are used to save and retrieve the canvas state. So every time the save method is called the current drawing is pushed on a stack, and every time restore method is called, the last saved state is returned from the stack and all saved settings are restored. So in this example I used both of them but what I first did was draw a rectangle and save it. Then I made changes to the settings and drew a new rectangle with new settings. So I saved that current and did new changes to it. After that I restored the previous state and drew a rectangle with restored settings. The last step was restore the original state and draw a rectangle with restored settings. This took quite a while but I think the save() and restore() function are really easy and simple to use. To see the outcome please click here.

Project 3

In this project I did a text string with a shadowing effect. What I noticed is that what I did in this project could also be done in CSS, except in canvas it's easier this is why I like it better. So what I basically did is change the offset of the X and Y axis which is how high and low I want the blur. Then I added shadow color, changed the font type and added my name in it. Please click here to see it.

Project 2

In this example I learned how to use images in canvas. What I did was import an image and just repeat it several times. What I first did was create a new image element so then it can read what I'm trying to import. After that I put a source path and then messed around with the X and Y axis, and also the width and height. To see how it turned out please click here.

Project 1

In this project I used three functions, fillRect, clearRect, and strokeRect. The fillRect draws the black square which I did 100x100 pixels. The clearRect functions removes a square from the center, so I chose 60x60 pixels. Now the last thing I used was the strokeRect which draws an outline inside the cleared square so I did it 50x50 pixels. To see the outcome of the project click here.