Bootstrap4でcanvasをレスポンシブ

メモ

cssファイル読み込むか,headあたりに<style>で以下を入れる

canvas {
  background-color: blue; 
  width: 100%;
  height: auto;
}

 

canvasを作成

<canvas id="canvas" width="300" height="300">
</canvas>

 

JS実行(jquery)

$( document ).ready(function() {

    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();

});

 

 

参考

https://stackoverflow.com/questions/23973932/responsive-canvas-in-bootstrap-column/23974225