概要
単なるcanvas要素に対する図形描画の記事は幾つかありますが、canvas要素に設定されている画像に対して、図形描画を行う記事などが少なかったので、備忘録的な意味も含めて
今回記事にしていきたいと思います。
図形描画の要件
・canvas要素に設定されている画像に対して、マウスによって図形描画を行う
・canvas要素をbase64形式で、ダウンロードさせる
自分が直面した問題
canvas要素に画像が表示されている状態で、マウスによる図形描画を行いたい。
だがマウスで、丸を描く動き・斜め移動させた場合に、残像が残ってしまい、うまく図形描画ができなかった。
残像を表示させたくなかったので、描画が終わった際に、clearRectでcanvas要素をクリアしていたが、画像もクリアされて表示されなくなってしまう。
解決方法
canvasには、レイヤー機能はないので、canvasを２つ重ねる様にして、clearRectで残像を消しても、画像が消えないようにする。
メインレイヤーと描画レイヤーに分けて描画を行う
⚫︎メインレイヤー
・画像はメインレイヤーに設定
⚫︎描画レイヤー
・マウスのによる図形描画はこのレイヤーに反映
・mouseupイベントで、メインレイヤーと描画レイヤーをマージ
成果物
下記githubのリポジトリに成果物をアップしていますので、気になる方はクローンして実際に動かしてみて下さい。
