HTML canvasで複数の円を描写したら意図しない変な図が表示された

2019.10.23

HTMLのcanvas要素とJavaScriptを組み合わせてアニメーションの練習をしていました。

手始めに複数の円をばばっと描写してみようと思ってやったら全く意図していない挙動になって、初心者がすごい驚いた話です。

こんなコードを書きました。

// canvasを取得
const canvas = document.querySelector("canvas");

// canvasの高さを画面の高さに
canvas.height = window.innerHeight;
// 横幅を画面の横幅に
canvas.width = window.innerWidth;

// 2Dのオブジェクトとして取得
const c = canvas.getContext("2d");

// 複数の円を描写
// 書き始め地点を初期化
c.beginPath();

// ★4つの円を定義
c.arc(400, 400, 100, 0, Math.PI*2, false);
c.arc(400, 200, 100, 0, Math.PI*2, false);
c.arc(200, 200, 100, 0, Math.PI*2, false);
c.arc(200, 400, 100, 0, Math.PI*2, false);

// canvasに描写 -&gt; これで4つの円が表示...????
c.stroke();

★のc.arc(...)メソッドのところでx, y座標をずらした４つの円を定義しました。

そして最後のstroke()メソッドで画面に描画します。

謎の「Z」の文字が・・・

ところが、この結果ブラウザに表示されたのは以下のような図でした。

HTML canvasで円

いや、なんで！？

想定もしていなかったZの文字。だって書いたのは円だけなのに・・・。

しかもあまりにキレイで見事な Z だったので何かしらやんごとなき大いなる意志(?)を感じてしまい余計驚きました。

結果的から言うと、以下のように書き直して円だけを４つ描写できるようになりました。

<pre class="font-size:15 top-margin:15 bottom-margin:15 lang:js decode:true" title="canvas.js">// BEFORE (コメントアウトは削除)
c.beginPath();
c.arc(400, 400, 100, 0, Math.PI*2, false);
c.arc(400, 200, 100, 0, Math.PI*2, false);
c.arc(200, 200, 100, 0, Math.PI*2, false);
c.arc(200, 400, 100, 0, Math.PI*2, false);
c.stroke();

// AFTER
c.beginPath();
c.arc(400, 400, 100, 0, Math.PI*2, false);
c.stroke();

c.beginPath();
c.arc(400, 200, 100, 0, Math.PI*2, false);
c.stroke();

c.beginPath();
c.arc(200, 200, 100, 0, Math.PI*2, false);
c.stroke();

c.beginPath();
c.arc(200, 400, 100, 0, Math.PI*2, false);
c.stroke();

もちろんfor文を使えば短くできますが、敢えて繰り返して書いてます。

c.beginPath()メソッドで書き始め地点の初期化
↓
c.arc(...)メソッドで軌道を作る
↓
c.strokeメソッドで実際に描画
↓
c.beginPath()メソッドで書き始め地点の初期化
↓
.......

というふうに、書いては初期化書いては初期化という手順を踏む必要があります。

円の軌道終点から、次の円の軌道始点への間が線となって現れてしまったということでした。