Learn HTML5 Canvas Drawing with JavaScript in 1 hour
3.7 (2 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
912 students enrolled

Learn HTML5 Canvas Drawing with JavaScript in 1 hour

Explore how you can use JavaScript to draw on HTML5 element make interactive drawing application download and save image
3.7 (2 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
912 students enrolled
Created by Laurence Svekis
Last updated 11/2019
English
English [Auto-generated]
Current price: $12.99 Original price: $19.99 Discount: 35% off
13 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1 hour on-demand video
  • 10 articles
  • 4 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Drawing using JavaScript on HTML5 Canavas element
  • Basic syntax needed to draw on canvas
  • Creating a drawing mini application from scratch
  • use of JavaScript to interact with canvas element
Course content
Expand all 23 lectures 01:05:13
+ Introduction to using Canvas HTML5 and JavaScript
22 lectures 01:04:00
Source Code
00:08
Source Code
00:08
Drawing Shapes with JavaScript
06:31
Source Code
00:09
Drawing Arc
07:45
Source Code Arc Happy Face
00:11
Canvas adding Text
01:51
Canvas Text Source Code
00:05
Images in Canvas
02:49
back to HTML create download link for image
05:09
Image download and upload Source Code
00:13
Canvas Drawer Project setup
09:57
Project Source code 1
00:16
Canvas Commands Project Dashboard
04:13
Source Code Project 2
00:21
Project functions Save and Clear Image
05:40
Source Code Final Project
00:34
Project Code Review
05:44
Requirements
  • HTML, CSS
  • Core JavaScript knowledge
  • Computer access
  • Setup of web developer environment
Description

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element.  This course covers using JavaScript to apply drawing to the canvas element.  How to get started with an easy to follow approach demonstrating the syntax as well as providing engaging opportunities to try the code.  After demonstrations of the canvas element and how to draw on it with JavaScript the course will show you how to create an interactive drawing tool that the web user can use to draw, selecting colors and pencil width.   Freely draw whatever you want and then download it as an image to your computer.   All JavaScript front end code.

Source Code and resources are included to get you started quickly.

SOURCE CODE is included every step of the way

Course is designed to highlight using JavaScript  - JavaScript IS A Prerequisite TO THIS COURSE *****Beginner JavaScript knowledge is required ***** as the course covers only JavaScript relevant to the canvas element and drawing on the canvas element will be covered. Also HTML and CSS knowledge is essential as scope of this course is all JavaScript focused.  

No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.

Course Covers

  • Basics of HTML5 Canvas

  • Selecting and ready to draw

  • How to draw on Canvas

  • Output text content onto canvas

  • Creating a happy face on Canvas

  • Setting and using images

  • Drawing Project for canvas

  • Download save and clear content

  • All this and more

Step by step learning with all steps included.

Along with friendly support in the Q&A to help you learn and answer any questions you may have.

Try it now you have nothing to lose, comes with a 30 day money back guarantee.  

Start building your own version of the application today!!!!

Who this course is for:
  • web developers
  • Web masters
  • Anyone who creates web content
  • JavaScript coders who want to learn more about HTML5 canvas drawing