Building HTML5 Canvas projects from scratch

Learn to create several useful code projects using html5 canvas JavaScript. Learn by example as we build these projects
4.7 (19 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.
5,600 students enrolled
$19
$100
81% off
Take This Course
  • Lectures 25
  • Length 2 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 3/2016 English

Course Description

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.


What are the requirements?

  • basic HTML and JavaScript
  • desire to learn
  • access to a computer

What am I going to get from this course?

  • create HTML canvas animations
  • create canvas images output to real images
  • update and work with canvas
  • apply HTML5 JavaScript Jquery concepts to web projects

What is the target audience?

  • 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

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: Learn HTML5 from projects
HTML5 Canvas Projects Course intro
Preview
04:00
How to use this course
Preview
02:11
Section 2: How to create a basic animation in HTML5 Canvas
Basic Canvas Setup for project
Preview
02:30
Setting project variables
Preview
04:36
How to draw the ball
02:43
requestAnimationFrame and clear frame for animation
03:12
create boundaries for ball change directions
06:44
random color for the ball
02:32
Adding cool effects to the project
05:33
Bouncing Ball Project Source Code
Article
Section 3: How to create an images draw on the canvas with a mouse project
Setup HTML5 Form type and Canvas
07:18
Setup project variables for drawing on canvas
04:21
Create addEventListeners and add functions for interaction
05:21
How to get the mouse position on canvas
08:37
Drawing on the canvas paths and lines
04:49
Using dynamic colors and marker widths to draw on canvas
04:56
Clear canvas start again
04:09
Save to base64 image code create new image from canvas content
05:19
Project Tweaks slider
03:02
Add jquery to send AJAX
02:12
Using AJAX to send image data and PHP to create images on the fly
05:51
Creating images on the fly storing them to the server
04:45
Code overview and summary
07:54
Project Source Code
Article
Cursor style Tweak
02:05

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Laurence Svekis, Instructor, 18+yrs Web Experience

I'm here to help you learnachieve your dreams, come join me on this amazing adventure today

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990, and my first website in 1998.  I enjoy sharing my knowledge with others and want to help you share in the wonderful opportunities that the internet provides."

"Learning, understanding with a strong passion for education.  The internet has provided us with new opportunities to expand and share knowledge."

Want to learn more about becoming a web developer, do you want to experience the freedom that technology provides for us? Learn how to bring amazing things to life online.  Technology connects us all in many ways.  It opens up doors to those who embrace it and learn how to make those connections real.

"My courses are designed to help you achieve your goals, learn and update skills"

Background : An 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. Passionate about everything to do with web application development, programming to online marketing with a strong focus on social media and SEO

"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 you!"

Ready to start learning?
Take This Course