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

Aarthi Elumalai

Tuesday, March 26, 2019

New Release!

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

Quick links: > Table of contents > What will you learn? > Preview

Packt Subscription

FREE

$9.99/m after trial

Video

$51.00

RRP $101.99

Save 49%

What do I get with a Packt subscription?

Exclusive monthly discount - no contract
Unlimited access to entire Packt library of 6500+ eBooks and Videos
120 new titles added every month, on new and emerging tech

What do I get with an eBook?

Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

What do I get with Print & eBook?

Get a paperback copy of the book delivered to you
Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

What do I get with a Video?

Download this Video course in MP4 format
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

$0.00

$51.00

$9.99 p/m after trial

RRP $101.99

Subscription

Video

Start a FREE 10-day trial

Frequently bought together

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

$ 101.99

$ 51.00

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

Mar 2019

6 hours 3 minutes

$ 51.00

Learn Javascript Web App Development -Build A Calculator App [Video]

$ 45.99

$ 23.00

Learn Javascript Web App Development -Build A Calculator App [Video]

Feb 2019

3 hours 54 minutes

$ 23.00

Buy 2 for $74.00
Save $73.98

Add to Cart

Video Details

ISBN 13 9781838820091

Course Length 6 hours 3 minutes

Introduction

Algorithm of the game app

HTML5 Building Blocks of the App

Create skeleton of the HTML5 code

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

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)

Step 1 & 2 - Getting the canvas and creating the drawing object

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

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

Video Description

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.

Video Preview

What You Will 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

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.

Introduction

Algorithm of the game app

HTML5 Building Blocks of the App

Create skeleton of the HTML5 code

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

Styling the Drawing/Paint app - achieving the final look

CSS basics - link tag, selectors and comments

CSS3 properties - box sizing and user select settings