Create Cross Platform Games and Apps using Canvas

Learn to create 2D Graphics and Animations
3.8 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
400 students enrolled
$19
$125
85% off
Take This Course
  • Lectures 43
  • Length 4 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2016 English

Course Description

Canvas is an HTML element that acts as a container or surface that you can draw 
2d and 3d graphics on using the javascript scripting language.  Canvas behaves like
any HTML element in that you can assign attributes and css styling to it.

Canvas is a fairly new technology of HTML5 and not supported in much older versions 
of major web browsers. The more recent versions of the major web browsers supports the canvas element.

Canvas is quite popular with developers as the development tools required to create canvas
based applications are free.Another cool thing with canvas is that you only have to create canvas
applications once and deployed to any device or medium that has a modern web browsers. 
This is a huge advantage over other apps that have to be deployed to the app store,google play
or windows store.

Canvas can be used in a variety of ways such as to create 2d and 3d games, Advertising,Data representation and reporting 
as well educational related projects.

What You Will Learn

  • What is Canvas
  • Why Canvas is popular
  • What Browser's support Canvas
  • What you can create with Canvas
  • Creating your first canvas
  • Understanding The Coordinates 
  • Creating a simple graphic

What are the requirements?

  • Basic HTML Skills
  • Basic CSS Skills
  • Basic JavaScript Skills
  • How to use a text editor

What am I going to get from this course?

  • 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

What is the target audience?

  • This course is meant for those with basic knowledge of HTML,CSS and Javascript

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Learning The Basics
Introduction
Preview
02:24
What is Canvas
Preview
01:24
Why is Canvas Popular
Preview
03:07
What You can Create with Canvas
Preview
02:41
Create Your First Canvas Part 1
Preview
04:36
Create Your First Canvas Part 2
07:58
Understanding Co-ordinates
04:28
Create a simple Graphic
11:45
Conclusion
01:20
Section 2: Project: Creating a Continuous Bouncing Ball
Introduction
00:44
Creating The Canvas
05:03
Accessing The Canvas With JavaScript
04:52
Drawing The Ball
11:46
Moving The Ball
07:55
Clearing the Canvas
06:21
Bouncing The Ball : Part1 - Refining The JavaScript Code
03:48
Bouncing The Ball : Part2 - Implementing Collision Detection
10:25
Section 3: Project 2: Create a complete 2d game on Canvas
Project Tour
01:51
Create The Canvas For The Game
05:04
Accessing the Canvas Using JavaScript
04:52
Create The Ball For The Game
11:46
Make the Ball Move
07:55
Remove Obstructions to the Ball
06:21
Make The Ball Bounce Using Collision Detection-Part 1
03:48
Make The Ball Bounce -Part 2
10:25
Section 4: Project 2: Create A Paddle and Controls for The Keyboard
Intro
00:28
Create Variables
05:35
Create Functions For The Paddle
07:09
Create Event Listeners and Events
04:52
Create Functions to Control Events
07:04
Create More Variables
03:40
Determine how to move the Paddle
07:40
How to end the Game
05:58
Section 5: Project 2: Create The Bricks
Intro
01:26
Create Variables For The Bricks
04:16
Create Arrays For The Bricks
04:30
Create Functions To Draw Bricks
07:06
Collision Detection
08:31
Activating Collision Detection
04:05
Create Game Score To Win
09:44
Create Mouse Controls
06:17
Sample Games
04:39
Where You Could Sell Your Games
01:54

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Bluelime Learning Solutions, Learning made simple

Bluelime is UK based and creates quality easy to understand eLearning solutions .All our courses are 100% video based. We teach hands –on- examples that teach real life skills .

Bluelime has engaged in various types of projects for fortune 500 companies and understands what is required to prepare students with the relevant skills they need.

Ready to start learning?
Take This Course