by Aarthi Elumalai | Publisher: Packt Publishing | Release Date: March 2019 | ISBN: 9781838820091

JavaScript front-end web app development - HTML5 Canvas and CSS3 - build a drawing app from scratch with hands-on trainingAbout This VideoLearn HTML5 Canvas, CSS3, and JavaScript and build a completely dynamic drawing/paint appLearn to design web applications with various CSS styling conceptsIn DetailIn this course, you'll learn how to build your own drawing/paint app from the ground up with just HTML5 Canvas, JavaScript, and CSS in just a couple of hours.You'll learn:How to create the HTML5 structures of your app.How to make the app pretty with CSS (design, design, design!)How to make the app work (draw on the canvas) with logic and algorithms, that is, JavaScriptBasic concepts of JavaScript and HTML5 Canvas (concepts related to this project).By the end of the course, you'll be one step closer to creating front-end web apps like a pro. You could even try creating other smaller web apps and games.All the codes and supporting files for this course are available at: https://github.com/PacktPublishing/Learn-Javascript-and-HTML5-Canvas---Build-a-Paint-App-for-DrawingDownloading the example code for this course: You can download the example code files for all Packt video courses you have purchased from your account at http://www.PacktPub.com. If you purchased this course elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

1. Chapter 1 : Introduction
   • Introduction 00:07:22
2. Chapter 2 : Algorithm of the game app
   • Algorithm of the game app 00:07:10
3. Chapter 3 : HTML5 Building Blocks of the App
   • Create skeleton of the HTML5 code 00:07:09
   • Add meta tags 00:06:05
   • Create the toolbar's skeleton 00:03:35
   • Create the color input box 00:05:58
   • Create the range input slider 00:02:56
   • Create the brush, erase, reset & save button and the drawing canvas 00:09:09
4. Chapter 4 : Styling the Drawing/Paint app - achieving the final look
   • CSS basics - link tag, selectors and comments 00:11:37
   • CSS3 properties - box sizing and user select settings 00:06:56
   • Style the drawing canvas 00:05:02
   • Style the toolbar - part 1 00:03:32
   • Style the toolbar - part 2 00:04:38
   • Style the toolbar - part 3 00:06:25
   • Style the color change tool - part 1 00:04:56
   • Style the color change tool - part 2 00:04:10
   • Style the size change tool 00:04:57
   • Style the remaining tools/buttons - part 1 00:05:44
   • Style the remaining tools/buttons - part 2 00:04:12
5. Chapter 5 : [OPTIONAL] Javascript Basic Concepts (related to this project)
   • Connecting HTML and script/JS files 00:06:04
   • An introduction to variables and assigning values 00:09:59
   • Mathematical operators and alerts 00:09:52
   • Conditional statements - if else statement 00:06:13
   • Conditional statements - Switch case 00:07:12
   • Loops - For loop 00:06:31
   • Arrays - 1 dimensional arrays 00:06:37
   • Arrays - 2 dimensional arrays 00:05:08
   • An introduction to functions (function definition and calls) 00:10:42
   • Intro to DOM - getElementById and InnerText 00:10:48
   • Intro to DOM - adding click events to buttons 00:09:06
   • More Event listeners Part 1 00:08:12
   • More Event listeners Part 2 00:04:39
6. Chapter 6 : [OPTIONAL] HTML5 Canvas Basic Concepts (related to this project)
   • Step 1 & 2 - Getting the canvas and creating the drawing object 00:08:27
   • Drawing a line (also explanation on canvas dimensions and pixel points) 00:08:50
   • Drawing & coloring a shape with poly lines (a path) 00:09:12
   • Drawing & coloring a circle and arcs 00:09:18
7. Chapter 7 : Javascript code for the app - Making the app work
   • Initializing variables and conditions - part 1 00:07:12
   • Initializing variables and conditions - part 2 00:03:36
   • Make the brush work - brush button click event & function 00:10:00
   • Make the brush work - mouse down event part 1 00:08:07
   • Make the brush work - mouse down event part 2 00:10:47
   • Make the brush work - mouse down event part 3 00:07:49
   • Make the brush work - draw on mouse drag 00:10:58
   • Make the brush work - mouse up event 00:04:17
   • Make the eraser work 00:09:07
   • Make the color change tool work 00:08:30
   • Make the size change tool work 00:07:36
   • Make the reset button work 00:08:08
   • Make the save button work 00:11:32
   • Add default conditions for when the app loads 00:07:06