Canvasに図形を描画し、imgタグに設定する

2025/2/19 JavaScript, プログラミング

はじめに

WebGISにて凡例のアイコンを表示していますが、サーバーを介さずに、クライアントのみで描画できる方法を探していたところ、Canvasに図形を描画し、imgタグに設定することが判明したので、その際のメモです。

以下の手順で実装

JavaScriptで<canvas>を作成
描画処理を実行
toDataURL()ででBase64エンコードの画像データを取得
<img>のsrcにセット
(必要なら)<canvas>を削除

canvas.html

<img id="outputImage" alt="Canvas Image">

<script>
  const canvas = document.createElement("canvas");
  canvas.width = 300;
  canvas.height = 200;
  const ctx = canvas.getContext("2d");

  // 四角形を描画
  ctx.fillStyle = "blue";
  ctx.fillRect(50, 50, 200, 100); 

  // テキストを描画
  ctx.font = "20px Arial";
  ctx.fillStyle = "white";
  ctx.fillText("Hello Canvas!", 80, 120);

  // Canvasの内容をimgタグにセット
  const dataURL = canvas.toDataURL("image/png");
  document.getElementById("outputImage").src = dataURL;

  canvas.remove();

</script>