Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Learn HTML5 Canvas Drawing with JavaScript in 1 hour
Rating: 4.2 out of 5(3 ratings)
926 students

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
Created byLaurence Svekis
Last updated 11/2024
English

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

2 sections • 24 lectures • 1h 5m total length

  • HTML5 Canvas Introduction with JavaScript2:05

    Learn to use the HTML5 canvas with JavaScript to draw shapes, images, and text, customize with color pens and pen width, and save to your computer.

  • Developer Setup Introduction2:47

    Set up your web development environment with Brackets and a simple index.html, then preview in the browser and code in the console to explore the Canvas API.

  • Basics of Canvas3:48

    Learn to set up a canvas element, assign an id, access it with JavaScript (query selector or id), then draw with getContext('2d'), fillStyle, and fillRect.

  • Source Code0:08
  • Canvas Dimensions.3:33
  • Source Code0:08
  • Drawing Shapes with JavaScript6:31

    Learn to draw shapes on the HTML5 canvas with JavaScript. Create filled and stroked rectangles, set coordinates, and use beginPath, moveTo, lineTo, fill, stroke, and closePath.

  • Source Code0:09
  • Drawing Arc7:45
  • Source Code Arc Happy Face0:11
  • Canvas adding Text1:51
  • Canvas Text Source Code0:05
  • Images in Canvas2:49

    Create an image object, set its source, wait for it to load, then draw it on the canvas at 0,0 with a 50 by 50 size, and download the image.

  • back to HTML create download link for image5:09
  • Image download and upload Source Code0:13
  • Canvas Drawer Project setup9:57
  • Project Source code 10:16
  • Canvas Commands Project Dashboard4:13

    Draw on the canvas with the mouse by toggling a draw flag and using beginPath, moveTo, lineTo, and stroke, while color and width are set via color picker.

  • Source Code Project 20:21
  • Project functions Save and Clear Image5:40
  • Source Code Final Project0:34
  • Project Code Review5:44

    Review and refine the HTML5 canvas drawing app using JavaScript, adjusting colors, pen width, and dynamic canvas size. Save drawings as base64 for download or server transfer.

  • Bonus Lecture1:12

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

Report abuse