This week I have been experimenting with the Save and Restore functions in canvas. In this canvas test I drew boxes in 2 corners of the canvas, and a almost transparent box in each box. In the bottom left side of the box i drew 2 rectangles. In the center of the canvas I put 1 square and another inside it to demonstrate the Restore function. To demonstrate the Save function I saved the first 2 colors I used.
View project here.
ctx.fillRect(0, 0, 150, 150);
ctx.save();
fillRect(0, 0, 150, 150); fills certain parts of the canvas depending on how big the canvas is. This function for mine covered the entire canvas starting from the top with 0 px to the right, and 0 px down, then covers 150 px to the right and 150 px down.
save(); saves the color that was being used, which in this case since I didn't specify the color it automatically used black.
ctx.fillStyle = 'green'
ctx.globalAlpha = 0.5;
ctx.fillRect(95, 95, 30, 30);
fillStyle = 'green' changes the color to green but if you don't use the save(); function the next time you use the fillRect function the color will change back to black, since that was the last saved color.
globalAlpha = 0.5; This function simply changes the transparency of the color you used.
ctx.restore();
ctx.restore();
ctx.fillRect(60, 60, 30, 30);
restore(); This function restores the last color you saved, in my case I saved 2 colors so I had to use 2 restore functions to get back to black.
