Graphics And Animation With HTML5 Canvas And Javascript

Graphics and Animation with HTML5 Canvas and Javascript

This is a presentation on how to write computer programs for doing simple graphics and animation. It uses the programming language JavaScript and is based on html5 canvas. The presentation is provided primarily in video form, but the text and slides from the presentation are provided as well. It is designed to allow students to quickly write simple programs for doing graphics without necessarily going into the details of programming concepts or graphics concepts. The material contains several bonus topics. These are optional topics that are primarily intended for more advanced students. These topics can be skipped to give a shorter, easier to understand presentation. The presentation is designed to be interactive with students actually programming small exercises between each section.

Main Code Editor for Lessons

• Orion editor (Some prefer the external jsbin editor though since it has more features)

Graphics

• Introduction
• Lines
• Bonus Topic: Curves
• Colored Lines
• Bonus Topic: Bezier Curves
• Filled Shapes
• Bonus Topic: Text
• Images
• Getting Images from the Internet

Animation

• Images Review
• Bonus Topic: Affine Transformations
• Moving Things
• Bonus Topic: Advanced Animation
• Keyboard Control
• Credits

Teaching Resources

• Presentation Slides
• Handout
• Video Playlist
• jsbin tool used in lessons
• Base Code

[Back to Downloads]

E-mail | About | Privacy Policy