Building HTML5 Canvas projects from scratch

Dive into the world of HTML5 Canvas and JavaScript! Create amazing animations and user-generated images with easy step-by-step guidance.

Profile photo of
By
via Udemy
  • Overview
  • Curriculum
  • Instructor
  • Review

Brief Summary

This course is all about learning how to create fun applications with HTML5 Canvas and JavaScript. You'll tackle real projects and learn while you do it!

Key Points

  • Hands-on coding with real projects
  • Step-by-step guides from start to finish
  • Access to source files and resources

Learning Outcomes

  • Create interactive animations using JavaScript on HTML5 Canvas
  • Generate user-driven images and save them to a server
  • Understand core concepts of web development with hands-on experience

About This Course

Learn to create several useful code projects using html5 canvas JavaScript. Learn by example as we build these projects

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.


  • create HTML canvas animations

  • create canvas images output to real images

  • update and work with canvas

Instructor

Profile photo of

Review
4.9 course rating
4K ratings
ui-avatar of Pierre de Witt
Pierre D. W.
2.0
4 years ago

This course only has some academic value which means you can't exactly put it to good use in a real world environment. Yes, it can teach you about various JavaScript functions and methods regarding the HTML5 canvas but I have yet to find someone who uses this in their design. Also, I believe the instructor doesn't use a script (or uses it in an inexperienced way) and makes pauses that are long when something confuses him. There is no bigger picture here, you just track what he's writing and do the same on your computer.

  • Helpful
  • Not helpful
ui-avatar of ronald nats
Ronald N.
5.0
5 years ago

The course is a very good beginning for graphic display. The instructor does an excellent presentation on how html5 canvas operates. If you are going to go into graphics design, this course will help in understanding how html5 and the DOM interact and used in the background of web design.

  • Helpful
  • Not helpful
ui-avatar of Kaustabh Ganguly
Kaustabh G.
5.0
6 years ago

fantastic

  • Helpful
  • Not helpful
ui-avatar of Guilherme Brito Garcia
Guilherme B. G.
5.0
7 years ago

The course was very interesting and objective.

  • Helpful
  • Not helpful
ui-avatar of Nguyen Quoc Trung
Nguyen Q. T.
5.0
7 years ago

good

  • Helpful
  • Not helpful
ui-avatar of Aditya Agrawal
Aditya A.
3.5
7 years ago

good one!

  • Helpful
  • Not helpful
ui-avatar of AlaaEldeen fadel
Alaaeldeen F.
5.0
7 years ago

good

  • Helpful
  • Not helpful
ui-avatar of Jefferson Udabor
Jefferson U.
5.0
7 years ago

Nice

  • Helpful
  • Not helpful
ui-avatar of Pavel Marsikau
Pavel M.
5.0
7 years ago

Short & Sweet

  • Helpful
  • Not helpful
ui-avatar of RT C
Rt C.
2.0
7 years ago

I appreciate Laurence taking the time to make this course. However, there is a reason it was free. Mr. Svekis blew through the code like a drunk driver blows past a red light, with no time for students to absorb what they're actually coding. There is no theory or context to this course; you are simply following the instructor code canvas projects.

This course is for people who already know how to do this stuff.

  • Helpful
  • Not helpful
Leave A Reply

Your email address will not be published. Required fields are marked *

Ratings

Courses You May Like

Lorem ipsum dolor sit amet elit
Show More Courses