Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/techlord001/htmlcanvas

Custom HTML Canvas demo that allows a user to create digital artwork. They simple have to use their mouse to draw across the screen similar to how one would use MS Paint.
https://github.com/techlord001/htmlcanvas

fullscreen html5 html5-canvas

Last synced: 14 days ago
JSON representation

Custom HTML Canvas demo that allows a user to create digital artwork. They simple have to use their mouse to draw across the screen similar to how one would use MS Paint.

Awesome Lists containing this project

README

        

# htmlCanvas 🖌️

> Feel like a child again with this HTML5 Canvas site. Simply hold down the mouse button and away you go. Create some multi-coloured masterpieces with the htmlCanvas 🌈!

The aim of this project was to simple demonstrate understanding of HTML5 Canvas and some basic CSS concepts (such as having an element encompass the full height and width of its window). The canvas is similar to this type of paper I had come across some years ago during my teaching years where this apparent black piece of paper when scraped with this dull mimic pencil would reveal a multi-colour spectrum underneath. The kids could create these colourful pieces without the need for additional coloured pens or crayons.

All the user has to do is click-down and hold the left mouse button and drag the cursor around the canvas. The colours will rotate (using HSL values) across a 360 degree spectrum as well as automatically altinate back and forth between different brush widths. In order to clear the canvas the page would need to be reloaded.

[Give it a try!](https://techlord001.github.io/htmlCanvas/ "HTML 5 Canvas - See if you can create a masterpiece")