Skip to content

gunjyo0817/Web-Canvas

Repository files navigation

Web Canvas

How to use

This is my web canvas. The canvas is located in the middle, the drawing menu and settings are on the left, and the tools and font menu are on the right.

  • Basic Components

    • Basic control tools

      • Brush

      Click the icon to select the tool.

      Drag the cursor on the canvas to draw.

      • Eraser

      Click the icon to select the tool.

      Drag the cursor on the canvas to erase.

      • Color Selector

      Click the color you want.

      • Simple menu

      Drag the cursor on the slider to change the drawing size and erasing size.

    • Text

    Click the icon to select the tool.

    Click on the position you want to text, it will pop up a texting box.

    After finish texting, click on the canvas to complete your text.

    You can change your font typeface and size by this two selector.

    • Cursor icon

    You can choose your drawing/erasing tool, and the cursor will become the tool when you hover/click on the board.

    • Refresh button

    Click to reset the canvas

  • Advanced Tools

    • Different brush shapes

    Click the icon to select the tool.

    Drag the cursor to make circles, rectangles, and triangles of different size

    • Un/Re-do button

    Click the counterclockwise icon to undo. Click the clockwise icon to redo.

    • Image tool

    Click to upload the small picture on the canvas.

    • Download

    Click to download the canvas as a png file.

  • Other Useful Widgets

See the bonus function description below

Bonus Function description

  • Two triangle shape

Click them to draw a(n) isosceles/right triangle

You can choose to draw an isosceles triangle or a right triangle.

  • Fill the shapes or not

Click it to change.(Default: hollow shape)

This tool can change the four shapes will fill up or not.

  • Curve line

Click it to draw a curve

In addition to being able to draw straight lines, curves can also be drawn.

  • Cut and move

Click it and drag a rectangle to select this area and cut, and click the canvas and move this area to the position you want

  • Save current state in browser

Click to save the current canvas in browser, close the browser and open again, it will be restore

(You can reset if you don't want this history)

Web page link

https://web-canvas-aa827.web.app/