回想

子どもの頃、ちゃんとパソコンを触ったのは、小学校の授業で「一太郎スマイル」を使って絵を描いたことでした。
https://pc.watch.impress.co.jp/docs/article/990118/just.htm

Canvas API でも絵を描くことができます。　アプローチ方法は異なりますが、「二次元の空間に、自分が表現したいと思うものを描く」という点では「一太郎スマイル」での体験も Canvas API での体験も同じです。
Canvas API を使えば、あの頃の体験を蘇らせることができます。

この記事の目的

Canvas APIでの描画速度を高めてくれる便利ハックや方法をご紹介します。
Canvas APIでは、描きたいものが複雑だったり、細かくなるほど、相応に手間がかかりがちかと思います。

3つほど方法をご紹介し、Canvas APIでこれから何かを描画しようとしている方、今後いつか描画するかもしれない方の力になれば幸いです。

クリックした位置の座標を表示させる

Canvas のDOM要素は、左上を基点として座標で位置を取得できるようになっています。
それを利用し、クリックした位置を画面に表示させます。
そうすることで、描きたい線の距離や位置を捉えやすくなり、描画速度が高まります。

Reactでは、以下のような関数を <Canvas />タグに噛ませることで座標を取得できます。

  const handleCoordinate = (
    e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
  ) => {
    const rect = e.target.getBoundingClientRect();
    const x = parseInt(`${e.clientX - rect.left}`);
    const y = parseInt(`${e.clientY - rect.top}`);
    setCordinateX(x); // useState_1
    setCordinateY(y); // useState_2
  };

座標数値をコピーできるようにする

前項で表示させた座標(x,y)を、区切りのカンマごとコピーできるようにします。

const handleCopy = (coordinate: string) => {
    // coordinate = 442,65
    navigator.clipboard.writeText(value);
};

こうすることで、コピーした値を、そのまま moveTo()メソッドや lineTo()メソッドの引数に貼り付けることができ、描きたい線の始点や終点などを簡単に捉えられるようになります。

backgroundImageで、ベース画像を差し込む

stylesのbackgroundImage属性を用いて、描きたい対象の、元データとなる画像をCanvasに予め差し込んでおきます。
※縦横のサイズ調整は必要です。

      <canvas
        width={800}
        height={680}
        id={"canvas"}
        style={{
          border: "solid 1px #383838",
          background: "#e9e9e9",
          backgroundImage: `url(${"/kduck.png"})`, // 描きたい対象の元画像を設定
          backgroundRepeat: "no-repeat",
          backgroundPosition: "100px",
        }}
        onClick={(e) => handleCoordinate(e)}
      />

こうすることで、Canvas APIによる、以下の赤線のような描画が可能になります。

画像参照： https://zukan.pokemon.co.jp/detail/054

ほとんど元のコダックの画像と同じ距離、曲がり具合を再現できているかと思います。
キュートなお腹の曲がり具合を完全に手中に収めました。

さらに前項まででご紹介した①座標を表示する機能と②座標のコピー機能と掛け合わせることで、座標の位置を正確かつ(比較的)迅速に取得し、描きたい元データにより忠実に描くことを可能にしてくれるかと思います。
(もっと良い方法あれば、ぜひコメント欄で教えてください)

まとめ

ポイントは以下です。
①クリックした位置の座標を表示させることで、相対的に線の位置を決められるようになる
②表示した座標の数値をコピーできるようにすることで、Canvas APIの各メソッドの引数に値を渡しやすくする
③backgroundImageで元データとなる画像を挿入し、その上に描画を施していくことで描画の精度を上げる

①・②・③を組み合わせることで、ちょっと複雑な絵なども、効率的に描画できるようになるかと思います。