Canvas is a simple HTML5 web site depending on the HTML5 tag canvas developed for the course T-427-WEPO Web Programming by Darri Valgarðsson, Edda Steinunn Rúnarsdóttir and Sigurður Sturla Bjarnason.
Simply open Canvas.html in any browser from the repository to run the webpage.
Various actions can be conducted on the Canvas of which all are fairly self-explanatory, especially since the canvas' function is quite analogous to popular websites and apps of this nature such as paintMS.
A tool tip is provided for a better user experience for every tool. The tools are located on the left side of the canvas element and include the moving tool which gives user the ability an already drawn shape on canvas. The pen tool (freestyle drawing) gives user the ability to draw a freehand line across canvas and the line tool a straight line. The rectangle tool and the circle tool draws these shapes whose radiuses/sizes are determined by the distance of the position of the mouse-down user action and the position mouse was let go. A color picker tool is provided; one for stroke color and the other for fill color. All tools have their own options such as linewidth, whether to draw a fill shape or stroke shape or both, font size, etc.
In additions to the toolbar tools, the user can undo and redo his or her action on the canvas, clear the canvas completely with the 'clear canvas button' and store the image on canvas to his or her local storage with the 'save' button. Canvas images stored to the local storage can then be retireved back on canvas with the 'load' button
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent