Learn Javascript and HTML5 Canvas - Build a Paint App for Drawing [Video]

Aarthi Elumalai

March 2019

6 hours 3 minutes

JavaScript front-end web app development - HTML5 Canvas and CSS3 - build a drawing app from scratch with hands-on training

Quick links:

Description
Table of Contents
Reviews
Authors

Skip to the end of the images gallery

Skip to the beginning of the images gallery

Watch Now

Description

More Information
Learn	Understand the basics of HTML5 and CSS (I'll explain the concepts as we code the project) Understand the basics of JavaScript and HTML5 Canvas (we have separate modules for these 2 topics) Build a completely dynamic drawing/paint app with HTML5 Canvas, CSS3, and JavaScript from scratch Know how front-end web app development works by building this project Create step by step algorithms for projects before turning them into code Improve your logical problem-solving skills Improve your front-end design and development skills Create HTML5 skeletons of web applications Design web applications with various CSS styling concepts Make web applications work with JavaScript concepts Get a foundation in HTML Canvas concepts
About	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.
Features	Learn HTML5 Canvas, CSS3, and JavaScript and build a completely dynamic drawing/paint app Learn to design web applications with various CSS styling concepts
Course Length	6 hours 3 minutes
ISBN	9781838820091
Date Of Publication	26 Mar 2019

Table of contents

1 Introduction

2 Algorithm of the game app

3 HTML5 Building Blocks of the App

Add meta tags
Create the toolbar's skeleton
Create the color input box
Create the range input slider
Create the brush, erase, reset & save button and the drawing canvas

4 Styling the Drawing/Paint app - achieving the final look

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

5 [OPTIONAL] Javascript Basic Concepts (related to this project)

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

6 [OPTIONAL] HTML5 Canvas Basic Concepts (related to this project)

Drawing a line (also explanation on canvas dimensions and pixel points)
Drawing & coloring a shape with poly lines (a path)
Drawing & coloring a circle and arcs

7 Javascript code for the app - Making the app work

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

Authors

Aarthi Elumalai

Aarthi Elumalai - Entrepreneur and programmer with 8 & 10 yrs experience resp.

She has been making money online for over 6 years now, right from when she finished high school. She kept equipping her knowledge and trying out new methods throughout college, so when she finished her studies, she can work for herself and someone else. She is proud that she has accomplished that goal. Her businesses involve affiliate marketing, services, list building, Kindle etc. She believes in keeping her eggs in various baskets, and she only preaches what she practices & believes. She recently decided to document her methods and knowledge in the form of helpful information products. She believes in being as thorough as possible, and that's what you'll find in her courses. She will cover every aspect of a business or method so her students are equipped with the complete knowledge they need to start their business and run it successfully.