NomadCoder-PaintJS

Clone Coding Repository for "JavaScript for Beginner 2" Course of NomadCoder

Purpose / Goal

To recap JavaScript basics and be familiar with some JavaScript functions and HTML components that will use frequently in websites.
At the end of the course, I am expected to build a simple painting board.

Canvas API is used to draw graphics with JavaScript
- Use HTMLCanvasElement.getContext(<contextType>) to get drawing context on the canvas.
  - If we use 2d for contextType, the function will return CanvasRenderingContext2D. Follow the link to see the available drawing functions of CanvasRenderingContext2D.
- Save Canvas as a image by using HTMLCanvasElement.toDataURL().
a tag can have download attribute, which makes users not to navigate to the URL but to download the linked URL.
- It should contains link of the file in href attribute, and download attribute should have file name.

Followed the lecture contents to build simple patining board. Only used HTML, CSS, and Vanilla JavaScript.

Feature List (From Lecture)

Drawing on the canvas
- Handle mouse events
- Change Color and Thickness of brush
- Fill/Paint on the canvas
- Save Image
Design for Desktop site (CSS)

What I added/modified

Touch Screen Event Handler
Restore drawings and settings when canvas resized
Change Design (CSS)
- Full-size canvas
- Show/Hide Control Panel
- Indicate which color is currently selected
Design for Mobile Site (CSS)


Demo Image of Painting Board