# Software Studio 2023 Spring
## Assignment 01 Web Canvas

### Scoring

| **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 |
| Un/Re-do button | 10% | Y |
| Image tool | 5% | Y |
| Download | 5% | Y |

| **Other useful widgets** | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| Name of widgets | 1~5% | Y |

---

### How to use
**1.筆刷、橡皮擦、Reset**
* 點擊鉛筆圖案的按鈕可以進入畫筆模式，透過按住移動滑鼠來繪製線條。
* 點擊橡皮擦按鈕就會進入清除模式，按住滑鼠移動可以將滑鼠周遭清除。

* 移動拉桿可以改變筆或是橡皮擦的大小，範圍是1px~50px。
* 點擊Reset按鈕會將整個畫布的內容清除。

**2.文字**

* 點擊該按鈕會進入文字模式，在畫布上任意一處點擊會產生一個文字方塊，輸入完後按Enter鍵，文字就會被繪製在畫布上的點擊處。
* 字形跟字體都可以藉由下拉式選單來更改。

**3.下載跟上傳**

* 點擊下載按鈕會將畫布的內容儲存成jpeg檔並下載至本地端。
* 點擊上傳按鈕可以從本地端搜尋圖片上傳，選擇好後可以在畫布上自由拉取圖片的大小。
(上傳範例)

**4.undo和redo**
* 按undo按鈕(左)可以將畫布回復到上一個動作，若已經回到最原始的狀態則保持原樣。
* 按redo按鈕(右)可以將undo後的畫布回復到下一步，但若目前的畫布不是最新的，在畫布上做更動會消除原本畫布之後的紀錄。

**5.三種圖形**
* 按下長方形、圓形、三角形的按鈕可以分別畫出相對應的圖形。

**6.調色盤**
* 在左邊的正方形區域，按住滑鼠移動可改變同一色塊的顏色，右邊的長方形則是可以調整色塊。

### Bonus Function description
**1. 選取**
* 按下該按鈕後可以在畫布上選取範圍，並拖曳到畫面的其他地方。

**2. 複製與貼上**
* 按下複製按鈕(左)後，可以在畫面上選取範圍複製，按下貼上按鈕(右)可以在滑鼠點擊的地方貼上複製的內容，若想要重複貼上只要在按一次貼上按鈕就好，再按下複製按鈕會更新貼上的內容。

**3. 實心空心切換**
* 當卡比按鈕呈現黑白時，代表現在畫的三種圖形是空心的，按下卡比按鈕後會變成彩色，代表可以畫出實心圖形，可自由在兩種風格切換。
 

**4. 滴管**
* 點擊滴管按鈕，在畫布的範圍內，畫筆的顏色會變成現在滑鼠所紙的顏色，在按一下滑鼠就可以確定更改。

### Web page link

https://mycanvas--coco.firebaseapp.com/

### Others (Optional)

可以多注意右下角的卡比會有什麼變化喔~

<style>
table th{
width: 100%;
}
</style>