In this project, I created my own web page with HTML5 canvas element where we can draw somethings.
Demo link: https://software-studio-89433.firebaseapp.com/
- PEN
- ERASER
- UNDO/REDO/CLEAR: Undo/Redo your action, or clean up the whole canvas.
- UPLOAD
- SAVE
- RECTANGLE/CIRCLE/TRIANGLE
- TEXT and PASTE
User can upload image and paste it onto the canvas.
Download current canvas as an image file.
The downloaded file would be the image below:
Change the brush shape into different shapes.
Then,drag the cursor to make circles, rectangles, and triangles of different size.
Note that the image of the cursor icon would be changed to cute cartoon images according to the currently used tool.
-
TEXT:
A text box would appear at where the user click. Type in your input, click anywhere, then the text would be printed on the canvas.
-
PASTE:
Once the user tried the "TEXT" button, they could click the "Paste" button and paste the text infinity times.
The color of your PEN, TEXT, RECTENGLE, CIRCLE, and TRIANGLE. can be customized.
Obviously, you can select the color which is already provided.
Otherwise, you can customized any color you want by clicking the COLOR PICKER shown below.
The range bar could help adjust the size of your PEN, ERASER,TEXT, RECTENGLE, CIRCLE, and TRIANGLE.
You can change the font of TEXT by the FONT MENU.
