Course Information
Course Overview
Learn to create 2D Graphics and Animations
Gaming continues to be one of the most engaging and dynamic areas in computer technology. With the evolution of web standards and the growing capabilities of modern browsers, it is now possible to design and deploy interactive, visually rich games and applications that run seamlessly across multiple platforms—without the need for specialized installations or app stores. This course introduces students to the power of HTML5 Canvas, a revolutionary technology that enables developers to draw and animate 2D and 3D graphics directly within the browser using JavaScript.
The Canvas element acts as a versatile surface for rendering graphics, visual effects, and animations in real time. Like any other HTML element, it supports attributes and CSS styling, making it easy to integrate within web pages and user interfaces. Students will explore the fundamental concepts behind Canvas, from setting up the drawing environment to manipulating pixels, colors, and shapes through JavaScript programming.
As a core feature of modern HTML5, Canvas is supported by all major browsers, making it an essential skill for today’s front-end developers and digital creatives. One of its greatest advantages is cross-platform compatibility—applications built with Canvas can run on desktops, tablets, and mobile devices without modification, provided a standards-compliant browser is available. This eliminates the need to publish apps through separate distribution platforms like the Apple App Store or Google Play, streamlining both development and deployment.
Canvas technology is widely used in game development, data visualization, interactive advertising, and educational tools. Through hands-on projects, students will learn to create their first Canvas graphics, understand coordinate systems, and animate objects to bring their ideas to life.
Learning Outcomes:
By the end of this course, students will be able to:
‣ Explain what Canvas is and how it works.
‣ Identify why Canvas is widely used and which browsers support it.
‣ Create and manipulate Canvas elements using JavaScript.
‣ Design and build simple 2D graphics and animations.
‣ Develop interactive, cross-platform web games and applications.
Course Content
- 5 section(s)
- 48 lecture(s)
- Section 1 Learning The Basics
- Section 2 Project: Creating a Continuous Bouncing Ball
- Section 3 Project 2: Create a complete 2d game on Canvas
- Section 4 Project 3: Create A Paddle and Controls for The Keyboard
- Section 5 Project 4: Create The Bricks
What You’ll Learn
- Create a Canvas
- Spot unsupported Canvas browsers
- Understand Co-ordinates
- Familiar with Canvas Attributes
- Know how to render 2d graphics
- Create a function to draw on Canvas
Skills covered in this course
Reviews
-
CCarto
very easy to understand tutorial, and easy to follow
-
AAli Hatem Ramadan
.....................
-
JJohan Kullingsjo
Content ok but the speed of the course is extremely slow. Both slow talk but also repeating almost the same content 3-4 times over and over. The content could be showed in half or less time. Same lectures repeated in each section ...