[Front-End] toDataURL及crossOrigin

前言

使用toDataURL()卻發現失敗，原來是因為跨網域的關係。

最近在利用Canvas製作類似修圖的App，在fillText的部分一直抓不到座標，最後才發現原來座標的基準點是文字的左下角而不是左上角，因此將文字的高度補回來就可以得到左上角的座標，但問題是要如何取得高度呢？

同樣在畫布上繪圖的程式碼，在不同瀏覽器卻有的可以執行有的卻不行。

若對Canvas做旋轉會是依照最左上角為中心，所以若要針對特殊的圖中心就要做些處理。

現在什麼東西都要響應式，但如果Canvas想要跟著螢幕改變大小則需要另外做一些動作，如果只是單純改變style會得到內容被放大的畫布，這不是我們要的結果。

Canvas提供了scale()可以達到zoom in和zoom out的效果，但很殘酷的是中心點只能在最左上，因此必須使用translate()做出位移。

由於專題需要，嘗試做一個地圖出來，這才知道原來如此簡單的功能做起來這麼崩潰 …