Fit canvas to div no matter size

Fit canvas to div no matter size

by Thanos Saringelos

HTML

<div id='b'><div id='a'></div>
<canvas id='c'></canvas>
</div>

CSS

#a{
  border:3px dotted black;
  width:414px;
  height:736px;
    position:absolute;
}
#b{ 
  width:414px;
  height:736px;
    position:absolute;
}
#c{
    position:absolute;
  border:3px solid green;
}

JavaScript

var canvas = document.getElementById('c');
canvas.width = 100;
canvas.height = 50;

fitCanvas({
  canvas: canvas,
  containerWidth: 414,
  containerHeight: 736
});

function fitCanvas(args) {
  var canvasRatio = args.canvas.width / args.canvas.height;
  var containerRatio = args.containerWidth / args.containerHeight;
  var leftOffset = 0;
  var topOffset = 0;
  var wCSS = args.containerWidth;
  var hCSS = args.containerHeight;

  if (canvasRatio > containerRatio) {
    wCSS = (args.containerHeight * canvasRatio);
    leftOffset = (-(wCSS - args.containerWidth) / 2);
  } else {
    hCSS = (args.containerWidth * canvasRatio);
    topOffset = (-(hCSS - args.containerHeight) / 2);
  }



  canvas.style.left = leftOffset + 'px';
  canvas.style.top = topOffset + 'px';
  canvas.style.width = wCSS + 'px';
  canvas.style.height = hCSS + 'px';

}