Make canvas as wide and as high as parent

Adapting to viewports and devices

The perfect canvas shouldn't play favourites with devices. Use vw for viewport width and vh for viewport height to create a canvas that’s responsive and adjusts dynamically to different screen sizes.

canvas {
  width: 100vw;   /* "I'm the width captain now!" */
  height: 50vh;   /* "Halfway there, living on a prayer!" */
}


To balance perfection with practicality, media queries can help you adjust the canvas size while maintaining its aspect ratio on window resize.

@media only screen and (max-width: 600px) {
  canvas {
    width: 100%;  /* "Look at me, I'm the width captain now!" */
    height: auto; /* "Lets be flexible, shall we?" */
  }
}


High-quality rendering on High-DPI

High-DPI displays are everywhere. So it's essential to use window.devicePixelRatio to determine the scale factor, ensuring your canvas drawings never look like an impressionist's blurry morning.

let scaleFactor = window.devicePixelRatio;

canvas.width = Math.floor(canvas.offsetWidth * scaleFactor);
canvas.height = Math.floor(canvas.offsetHeight * scaleFactor);

let context = canvas.getContext('2d');
context.scale(scaleFactor, scaleFactor); /* "To infinity and beyond!" */


Your canvas will remain sharp and clear, irregardless of the screen resolution.

Handling dynamic resizing like a champ

A well-tamed dynamic resizing doesn't bring performance issues to the party. So, best debounce the resize event to ensure the browser isn't doing redundant computations.

window.addEventListener('resize', debounce(resizeCanvas, 250)); /* "Cool it, Turbo!" */


The debounce function makes sure that resizeCanvas() takes a chill pill and doesn't get called too frequently, specifically not more than once every 250ms.

Troubleshooting common issues

Working with CSS sizes

The rule of thumb in CSS sizing? The parent's size must have an explicit definition. If the parent lacks a defined width and height, sizing the child canvas with percentages becomes a game of guess.

Defogging Blur on High-DPI Displays

Your canvas can play a neat game of hide-and-seek in high-DPI screens, appearing blurry instead of crisp. The trick is to find the pixel ratio of the device and delicately adjusting the drawing buffer.

Prepping for Page Layout Shifts

Modifying your canvas size can induce layout shifts without any warning. So, a good strategy is to have the canvas reside within a parent container with overflow: hidden or employing layout managers like Flexbox or Grid.