Dunce Caps for Cats Dot Com

For a new project I wanted to make a responsive canvas element with an image overlaid with lines. To accomplish this, I put the canvas inside a section div that had width: 80vw. I used jQuery with this project and I called .parent() to get the canvas container, then set the height and width of the canvas as functions of its container. Because the container width is computed in viewport units, the canvas dimensions will also always be proportional to the size of the window.

const canvas = $('#canvas');
const ctx = canvas.get(0).getContext('2d');
const container = canvas.parent();

function resizeCanvas() {
  canvas.css('width', container.width());
  canvas.css('height', container.width() / 2 );
}

$(window).resize(resizeCanvas);