| Basic Components | Score | Check |
|---|---|---|
| Basic control tools | 30% | Y |
| Text input | 10% | Y |
| Cursor icon | 10% | Y |
| Refresh button | 5% | Y |
| Advanced Tools | Score | Check |
|---|---|---|
| Different brush shapes | 15% | Y |
| Undo/Redo buttons | 10% | Y |
| Image tool | 5% | Y |
| Download | 5% | Y |
| Other Useful Widgets | Score | Check |
|---|---|---|
| Name of widgets | 1~5% | Y |
Describe how to use your web app and optionally include images to illustrate.
The toolbar is on the left side, and the main canvas area is on the right.
The background of the selected tool will change color.
Click to use the brush tool for drawing. This is implemented using moveTo and lineTo. Drawing stops if the cursor is dragged outside the canvas area.
Click to use the eraser tool. It works the same way as the brush but changes globalCompositeOperation to destination-out. It switches back to source-over when using other tools.
Click to draw rectangles. The starting point and current cursor location define the diagonal. It uses strokeRect to draw.
Click to draw circles. The starting point and current cursor location define the diameter. It uses arc to draw.
Click to draw triangles. It first draws a line from the starting point to the cursor, mirrors that line, then connects back to form a triangle.
Undo the last action. Each canvas click saves an image to an ImgStack. Clicking Undo reverts to the previous state.
Redo the next action. Like Undo, but restores the next state in the stack.
Clears the canvas using clearRect.
Downloads the image by converting the canvas to a data URL using toDataURL.
Uploads an image. Uses an input of type file to get the file, converts it to a URL, and displays it on the canvas.
Describe your bonus functions and how to use them.
Draws a straight line from the starting point to the cursor using moveTo and lineTo.
Draws an ellipse using the ellipse function.
Holding the brush for a while will convert the stroke into a straight line (similar to GoodNotes). This is done by setting a timer to check the time since the last move event.
Uses a highlighter-like tool. Automatically sets the color to yellow and increases transparency. Drawing is similar to the straight line tool.
Allows you to pick a color from the canvas. Clicking on a pixel sets the current drawing color to that pixel’s color. Note: Clicking on a blank background will set it to black.
Your web page URL:
https://hw-canvas-110062236.firebaseapp.com/
Anything you want to say to the TAs.