HTML5 Canvas

Project Overview

Design and develop a three-page Create a website showing a minimum of six HTML5 web animation demonstrations related to a specific theme or topic of interest. The site must include demonstrations of HTML5 canvas web graphic and animation techniques. Additionally, the visual style of the work should also reflect the theme, using CSS for font and color attributes.

Summary

Edited an existing Kickstart web framework to be responsive and fit theme of the site and added previously designed logo. A different Canvas implementation were presented as a course lab and manipulated the script to create a new canvas design every week. Which includes typography, images, animation, and chart API.

Design Process

I have never utilized any kind of web framework to build websites before and I honestly do not like the Kickstarts default look which I changed to fit the theme of the site. I also overhauled the navigation section of the page and hid the home button so I can add my logo as a representation of the index page. I also removed the gradient background and changed the color of the arrow to black.

Playing around with HTML5 Canvas is both frustrating and educational. I uploaded a character model I drew a few months ago and added in the paint splatters that I wanted to use for week 2's lab. Each image is technically in a different layer and I had to utilize globalCompositeOperation to ensure that certain images are on top of each other. Same technique was used for the water effect behind the canvas.

Animation was implemented for the model which was problematic because the timeline-based script that was provided was incompatible with my initial design. I had to wite my own script and implement FPS to slow down the animation.

Lastly, I designed a new canvas for the chart since the other canvas did not fit the weeks lab. I primarily created a vector image to be the header of this weeks lab, but decided to scrap it because it looked really dull at the end. I decided to use one of the Blizzard Entertainment's royalty-free images instead.I did not want a cropped image, so I cut out the image the I wanted and added gradient effect to make it more seamless inside the canvas. Finally, I decided to use this header as a background image inside a div container instead of placing it inside a canvas because of loading issues in the past. I did however, place the logo inside the canvas.

For my slider, I decided to use the canvas as my images because it represents what the site is about and the images also highlights my work as a web developer.

Conclusion

The canvas each week was well received by the class. Creating and editing the canvas each week was educational and challenging but worth it in the end. The biggest challenge is implementing the old script to work with the new week and certain images does not load properly. I would like to create more HTML5 canvas to further familiarize myself on how it works and how I can add it to my future websites.