Building HTML5 Canvas projects from scratch | Laurence Svekis | Skillshare

Building HTML5 Canvas projects from scratch

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
24 Videos (1h 47m)
    • Canvasprojects

    • 1 HTML5 Canvas Projects Course intro

    • 2 How to use this course

    • 3 Basic Canvas Setup for project

    • 4 Setting project variables

    • 5 How to draw the ball

    • 6 requestAnimationFrame and clear frame for animation

    • 7 create boundaries for ball change directions

    • 8 random color for the ball

    • 9 Adding cool effects to the project

    • 11 Setup HTML5 Form type and Canvas

    • 12 Setup project variables for drawing on canvas

    • 13 Create addEventListeners and add functions for interaction

    • 14 How to get the mouse position on canvas

    • 15 Drawing on the canvas paths and lines

    • 16 Using dynamic colors and marker widths to draw on canvas

    • 17 Clear canvas start again

    • 20 Add jquery to send AJAX

    • 18 Save to base64 image code create new image from canvas content

    • 19 Project Tweaks slider

    • 21 Using AJAX to send image data and PHP to create images on the fly

    • 22 Creating images on the fly storing them to the server

    • 23 Code overview and summary

    • 25 Cursor style Tweak


About This Class


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

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.





  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv


Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Laurence Svekis

Web technology Instructor

Providing Smart digital solutions online since 2001. I am considered a true web technology expert. Having professional experience in a wide range of digital areas. Everything from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

Understanding how users flow through the web and learning what drives users to interact online has been the cornerstone of what I do. The more seamless the process the better the user experienc...

See full profile

Report class