canvas上にHTMLを出力したい

Question

クリックでキャンバス上に文字を表示させたいです。
今のコードでは、キャンバスそのものを文字に書き換えてしまっています。

 <!-- キャンバスの設定 -->
  <canvas id="canv" width="450" height="450"></canvas>
  <script>
    var ctx = document.getElementById("canv").getContext('2d');
    
    // 描画内容を指定する
    // 盤
    ctx.fillStyle = "rgb(60,8,0)";
    ctx.fillRect(0, 0, 450, 450);
    
    // 格子の設定
    ctx.strokeStyle = "white"
    ctx.lineWidth = 2;
    ctx.beginPath();
    
    // 縦線
    for (var v = 50; v < 450; v+=50) {
      ctx.moveTo(v, 0);
      ctx.lineTo(v, 450);
    }

    // 横線
    for (var h = 50; h < 450; h+=50) {
      ctx.moveTo(0, h);
      ctx.lineTo(450, h);
    }
    
    // 描画内容を実行する
    ctx.stroke();

document.getElementById("canv").onclick= function() {
  document.write("歩");
};
</script>
コード

Answer 1

ただ文字を出すだけならctx.fillText()で出来ますがHTML elementでは無いのでコピペしたりできません

HTML elementを載せたいのならばcssのstyleを以下のようにすると出来ます

#container {
  position: relative;
}
#overlay{
  z-index:1;
}
#container canvas, #overlay {
  position: absolute;
}
canvas {
  border: 1px solid black;
}

 <div id="container">
  <canvas id="canv" width="450" height="450"></canvas>
  <div id="overlay">This div is over the canvas</div>
</div>

参考記事：stackoverflow How to overlay a div over a canvas

fillTextについて:w3c schools

Comments

[librashogi]

ありがとうございます。一度試してみます！