Building HTML5 Canvas projects from scratch

50.00 40.00
$50.00 $40.00

  • Course Delivery: On Demand
  • Language: English

Chat Live | Contact Us | Toll Free: (888) 360-8764



"Best way to learn is by real examples of code, showing you how the code works together to create amazing applications from scratch.

Canvas drawing is done using JavaScript, this course focuses on JavaScript based around HTML5 canvas interactions. Also covers some basic AJAX, PHP, JQUERY, Bootstrap.

HTML5 canvas provides an amazing opportunity to create some really cool effects on web pages. This course will show you how to build projects from scratch, using HTML5 and JavaScript. How to use JavaScript applying it to the canvas to create animation and user generated content on the fly.

I have over 15+ years of web development experience, and have worked on hundreds of web applications just like these. One of the best ways to learn is by example, so I've created some projects that really demonstrate core applications that can be created using html5.

This course is designed to help you learn and develop skills for working on real world concepts using JavaScript and HTML5. Starting from scratch, step by step explanations of what code to use and where. We demonstrate how the code gets used, in addition to the process of building something from concept to launch.

All of the source files are included, top resources and links are shared throughout the course. Code samples are explained step by step, and you are encouraged to work along with the course material.

Project one canvas animation tutorial - designed to demonstrate animation in HTML5 canvas

Covers basic concepts of how to animate in canvas
JavaScript to use that helps with animation
how to draw paths on canvas using JavaScript
how to create arcs and circles
Added object effects in JavaScript - random colors and shadows
how to apply logic to create a continuous animation
Project two create user generated images - learn how to draw on the HTML5 canvas and output those images.

basics of scoping a project from scratch
setup html5 field types and buttons
link to bootstrap and jquery
apply event listeners for user interaction
get mouse cursor position and calculate actions
event triggered functions
pass base64 image data to webpage
use AJAX to send image data to the server
use PHP to generate png files from the HTML5 canvas drawing
In addition, I provide regular support to students. Also course upgrades and new projects will be added regularly.

The code in these projects is included!!! for you to be able to get a jump start on creating your own projects using Canvas."


  • Anyone who wants to learn more about using HTML5 canvas
  • Anyone who wants to enhance their skills with canvas
  • Build real world projects using javascript and canvas
  • Learn how to make amazing projects from scratch
  • Web developers and application developers

Course Objectives

  • Create HTML canvas animations
  • Create canvas images output to real images
  • Update and work with canvas
  • Apply HTML5 JavaScript Jquery concepts to web projects

Topics Covered

  • Section 1: Learn HTML5 from projects
  • Section 2: How to create a basic animation in HTML5 Canvas
  • Section 3: How to create an images draw on the canvas with a mouse project


"Basic HTML and JavaScript desire to learn access to a computer"


Subject Matter Expert

"Providing Smart digital solutions online since 2001. Enjoys bringing amazing things to life online, sharing and learning about new technologies.  Innovative technology expert with a wide range of real world experience.

Technology that drives users to connect online, is what makes the internet the internet.

Experienced web application developer, having worked on multiple enterprise level applications, hundreds of websites, business solutions and many unique and innovative web applications.  Web application development areas of expertise include HTML, CSS, JavaScript, JQuery, Bootstrap, PHP and MySQL.  Anything to do with web creation and digital experience. I am interested in everything to do with web application development, programming to online marketing with a strong focus on social media and SEO.  

Understanding how users flow through the web and learning what drives users to interact online has been the cornerstone for my professional career. The more seamless the process the better the user experience and the more likely they are to interact again and share their experiences.

Understanding technology provides a means to better connect with users.  It also opens so many doors.   Knowledge is the key to success and I want to help you experience what technology has to offer. I'm passionate about web technologies, and look forward to sharing my knowledge and experience with others.  Come join me in this awesome adventure."

Got questions? Contact us below or call 877-881-2235

Why Choose

  • Fast and easy courses completion
  • Get an education faster than at traditional colleges!
  • 100% online - No classroom attendance required.
  • Unlimited 24x7 online customer support
  • Over 500,000+ certified nationwide.