https://github.com/thoughtscript/exp_whiteboard_js_2023

Experiments with the Canvas API
https://github.com/thoughtscript/exp_whiteboard_js_2023

canvas html5 javascript

Last synced: about 2 months ago
JSON representation

Experiments with the Canvas API

• Host: GitHub
• URL: https://github.com/thoughtscript/exp_whiteboard_js_2023
• Owner: Thoughtscript
• License: mit
• Created: 2024-04-21T17:46:37.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-08-10T03:47:06.000Z (5 months ago)
• Last Synced: 2024-08-10T04:38:34.491Z (5 months ago)
• Topics: canvas, html5, javascript
• Language: JavaScript
• Homepage: https://thoughtscript.github.io/exp_whiteboard_js_2023/
• Size: 16.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# exp_whiteboard_js

[![](https://img.shields.io/badge/Canvas-API-orange.svg)](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)

An experiment to get more acquainted with the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) (I was looking into this a long time ago and wanted to revisit this topic).

I was also concerned by the lack of simple drawing tools and found the following example inspiring: https://github.com/os1ma/handwriting-canvas/blob/main/LICENSE. Whole companies and websites have launched to do this kind of thing and I was surprised at how easy it is to implement from scratch.

Good to practice proper Library and SDK design.

## Use

### Drawing

1. Use your mouse to draw lines, curves, etc. 

2. **Hold-Down** the **Left-Mouse-Button** to do so.

### Erase

1. Select **Erase**.

1. Use your mouse to erase specific parts of your drawings.

2. **Hold-Down** the **Left-Mouse-Button** to do so.

> Select **Erase** again to draw once more!

### Clear the Whiteboard (Entirely)

1. Select **Clear** to reset the page/return it to its blank state.

### Save

1. Select **Save** to download your drawing.

2. (You can import these or use them to generate an inventory of Machine Learning items for [Numpy](https://numpy.org/) - say for Image Recognition).