You can have a responsive canvas in 3 short and simple steps:
Remove the width
and height
attributes from your <canvas>
.
<canvas id="responsive-canvas"></canvas>
Using CSS, set the width
of your canvas to 100%
.
#responsive-canvas {
width: 100%;
}
Using JavaScript, set the height to some ratio of the width.
var canvas = document.getElementById('responsive-canvas');
var heightRatio = 1.5;
canvas.height = canvas.width * heightRatio;