What problem does this solve?
The repository currently has many great utility and UI-based projects, but it lacks a dedicated project that focuses on the HTML5 <canvas> API and complex mouse event handling.
For beginners looking at this repository to learn, there isn't a clear, interactive example of how to build a freehand drawing application from scratch. This project solves that by providing a clean and easy-to-understand implementation of a digital whiteboard.
Proposed solution
I propose adding a "Browser Whiteboard" project under the Projects/ directory. It will be built strictly with HTML, CSS, and Vanilla JavaScript to adhere to the repository guidelines.
It will allow users to:
- Draw freehand on the screen using mouse events (
mousedown, mousemove, mouseup).
- Change the brush color using a native HTML color picker.
- Adjust the brush thickness using a range slider.
- Clear the canvas entirely.
- Export and download their drawing as a
.png file directly from the browser.
Alternatives you considered
1. Using external libraries:
I considered using a third-party drawing library like Fabric.js, p5.js, or React Canvas. However, since the repository strictly requires Vanilla JavaScript with no frameworks or bundlers, I chose to use the native HTML5 Canvas API.
2. Adding complex features:
I considered adding advanced tools like layer management, shape tools (rectangles/circles), or an eraser. However, I decided to stick to the core features (brush, color, size, clear, save) to ensure the code remains lightweight, beginner-friendly, and easy for other contributors to read and learn from.
What problem does this solve?
The repository currently has many great utility and UI-based projects, but it lacks a dedicated project that focuses on the HTML5
<canvas>API and complex mouse event handling.For beginners looking at this repository to learn, there isn't a clear, interactive example of how to build a freehand drawing application from scratch. This project solves that by providing a clean and easy-to-understand implementation of a digital whiteboard.
Proposed solution
I propose adding a "Browser Whiteboard" project under the
Projects/directory. It will be built strictly with HTML, CSS, and Vanilla JavaScript to adhere to the repository guidelines.It will allow users to:
mousedown,mousemove,mouseup)..pngfile directly from the browser.Alternatives you considered
1. Using external libraries:
I considered using a third-party drawing library like Fabric.js, p5.js, or React Canvas. However, since the repository strictly requires Vanilla JavaScript with no frameworks or bundlers, I chose to use the native HTML5 Canvas API.
2. Adding complex features:
I considered adding advanced tools like layer management, shape tools (rectangles/circles), or an eraser. However, I decided to stick to the core features (brush, color, size, clear, save) to ensure the code remains lightweight, beginner-friendly, and easy for other contributors to read and learn from.