js canvas responsive

js canvas responsive

by Boba Poshtar

HTML

<canvas></canvas>

CSS

body { margin: 0; padding: 20px;}
canvas { display: block; border: 1px solid red;}

JavaScript

var canv = document.querySelector('canvas');
canv.width = 1000;
canv.height = 600;

function winResize(){
	var w = window.innerWidth - 40;
  canv.style.width = w + 'px';
  canv.style.height = w * 0.6 + 'px';
};
winResize();
window.addEventListener('resize', winResize);

var ctx = canv.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(250, 200, 500, 300);