audunhauge/jpaint

A beginners guide to creating a painting app in javascript

JPaint

A beginners guide to creating a painting app in javascript. The app will use canvas for drawing shapes.

(my students voted for canvas over svg as they had some prior experience with canvas).

Setting out

This is a english version of a project I made for my students. The intent is to make a canvas paint app from the ground up. My students have some basic knowledge of js, css and html.

Tools

Basicly chrome and vs-code. I assume most modern browsers work - but I have no intention of testing in other than chrome. This is intended for education - compatability is not part of the goals.

Assumptions about prior knowledge

To follow this guide I assume you have basic skills in HTML and CSS. For js I assume you know:

1. const, let
2. for-loops
3. arrays and objects
4. functions (can make simple functions)
5. if else

Concepts I'm trying to teach with this guide

1. Classes
2. Documentation with jsdoc
3. Some user interface design (basic)
4. Array functions
5. Canvas drawing
6. How to find and use code to solve problems