CODEWITHSUNDEEP
javascriptcanvasresponsive-designsizewidth
Yaroslav Shabanov
Yaroslav Shabanov

Reputation: 283

Responsive canvas for different devices

I want to set canvas width as div width. The canvas-container will be resizable depends on browser width.

<div class="canvas-container" width=100% align="center">
    <canvas id="Canvas"></canvas>   
</div>

Upvotes: 0

Views: 82

Answers (1)

Rayon
Rayon

Reputation: 36609

Use window.resize event and re-draw canvas elements on every resize event(In handler)

Try this:

(function() {
  var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
  window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context.fillRect(10, 10, canvas.width - 20, canvas.height - 20);
  }
  resizeCanvas();
})();
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
canvas {
  display: block;
  background: #eee;
}
<canvas id="canvas"></canvas>

Upvotes: 1

Related Questions