Learn Javascript and HTML5 Canvas - Build a Paint App for Drawing [Video]
- FREE Subscribe Access now
- £76.99 Video Buy
- Instant online access to over 7,500+ books and videos
- Constantly updated with 100+ new titles each month
- Breadth and depth in over 1,000+ technologies
-
Introduction
-
Algorithm of the game app
-
HTML5 Building Blocks of the App
-
Styling the Drawing/Paint app - achieving the final look
- CSS basics - link tag, selectors and comments
- CSS3 properties - box sizing and user select settings
- Style the drawing canvas
- Style the toolbar - part 1
- Style the toolbar - part 2
- Style the toolbar - part 3
- Style the color change tool - part 1
- Style the color change tool - part 2
- Style the size change tool
- Style the remaining tools/buttons - part 1
- Style the remaining tools/buttons - part 2
-
[OPTIONAL] Javascript Basic Concepts (related to this project)
- Connecting HTML and script/JS file
- An introduction to variables and assigning values
- Mathematical operators and alerts
- Conditional statements - if else statement
- Conditional statements - Switch case
- Loops - For loop
- Arrays - 1 dimensional arrays
- Arrays - 2 dimensional arrays
- An introduction to functions (function definition and calls)
- Intro to DOM - getElementById and InnerText
- Intro to DOM - adding click events to buttons
- More Event listeners Part 1
- More Event listeners Part 2
-
[OPTIONAL] HTML5 Canvas Basic Concepts (related to this project)
-
Javascript code for the app - Making the app work
- Initializing variables and conditions - part 1
- Initializing variables and conditions - part 2
- Make the brush work - brush button click event & function
- Make the brush work - mouse down event part 1
- Make the brush work - mouse down event part 2
- Make the brush work - mouse down event part 3
- Make the brush work - draw on mouse drag
- Make the brush work - mouse up event
- Make the eraser work
- Make the color change tool work
- Make the size change tool work
- Make the reset button work
- Make the save button work
- Add default conditions for when the app loads
About this video
In 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, JavaScript
- Basic 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-Drawing
Style and Approach
This course is a seamless blend of text, videos, code examples,that will help you take learn efficiently as you progress through the course.
- Publication date:
- March 2019
- Publisher
- Packt
- Duration
- 6 hours 3 minutes
- ISBN
- 9781838820091