How to make an HTML5 canvas responsive

To make HTML5 Canvas responsiveness, its width and height attributes must be dynamically adjusted through JavaScript and the content can be redrawn. It cannot rely solely on CSS, otherwise it will cause blur or stretching; first set the width and height of the canvas to 100% to adapt to the container, and then get the display size through clientWidth and clientHeight, set canvas.width and canvas.height to this size to match the pixel resolution, and readjust when the window size changes. and redraw; to maintain the clarity under high DPI screen, devicePixelRatio needs to be calculated and applied to internal resolution, and coordinate system scaling is used using ctx.scale; finally, canvas is wrapped in a container with aspect height or aspect ratio limitations to control the layout, ensuring that it can be displayed correctly on different devices and the image is sharp. The complete responsive solution includes three key steps: dynamic sizing adjustment, content redrawing and DPI adaptation, which can be run stably in various screen environments after implementation.

Making an HTML5 canvas responsive isn't as straightforward as making other HTML elements responsive, because canvas rendering is based on pixel dimensions set via JavaScript or attributes, not just CSS. If you don't handle it properly, the canvas can appear blurry or stretched on different screen sizes. Here's how to make it work correctly.

Set the canvas size dynamically with JavaScript

The key to a responsive canvas is adjusting its drawing buffer (the actual pixel resolution) based on the container or viewport size. You can't rely solely on CSS to scale the canvas without losing quality.

Instead, use JavaScript to:

• Set the canvas width and height attributes to match the desired display size in pixels.
• Redraw the content whenever the window resizes.

 <canvas id="myCanvas"></canvas>

 #myCanvas {
  display: block;
  width: 100%;
  height: auto;
}

 const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

function resizeCanvas() {
  // Set display size (CSS pixels)
  const displayWidth = canvas.clientWidth;
  const displayHeight = canvas.clientHeight;

  // Check if the canvas is not the same size
  const needResize = canvas.width !== displayWidth || canvas.height !== displayHeight;

  if (needResize) {
    // Set the actual size to match the display size
    canvas.width = displayWidth;
    canvas.height = displayHeight;
  }

  // Redraw your content
  drawContent();
}

function drawContent() {
  // Example: draw a rectangle
  ctx.fillStyle = 'blue';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

// Initial setup
resizeCanvas();

// Handle window resize
window.addEventListener('resize', resizeCanvas);

Use a container to control layout

Wrap the canvas in a responsive container so you can control its aspect ratio or maximum size using CSS.

 

  <canvas id="myCanvas"></canvas>

 .canvas-container {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9; /* Optional: maintain aspect ratio */
  margin: 0 auto;
}

#myCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

This way, the canvas scales within the container, and JavaScript adjusts the internal resolution accordingly.

Handle high-DPI (retina) displays

On high-DPI screens (like Retina displays), you may need to scale the internal resolution to avoid blurry graphics.

 function getPixelRatio(context) {
  const backingStore = context.backingStorePixelRatio ||
                       context.webkitBackingStorePixelRatio ||
                       context.mozBackingStorePixelRatio ||
                       context.msBackingStorePixelRatio ||
                       context.oBackingStorePixelRatio ||
                       1;

  return (window.devicePixelRatio || 1) / backingStore;
}

function resizeCanvas() {
  const displayWidth = canvas.clientWidth;
  const displayHeight = canvas.clientHeight;

  const needResize = canvas.width !== displayWidth || canvas.height !== displayHeight;

  if (needResize) {
    const pixelRatio = getPixelRatio(ctx);

    // Set the internal size to include pixel ratio
    canvas.width = displayWidth * pixelRatio;
    canvas.height = displayHeight * pixelRatio;

    // Scale the context to ensure correct drawing coordinates
    ctx.scale(pixelRatio, pixelRatio);
  }

  drawContent();
}

This ensures sharp graphics on high-resolution screens by increasing the internal resolution while keeping the displayed size consistency.

Key points to remember

• Never rely only on CSS to resize the canvas — it will stretch the image and cause blurriness.
• Always match canvas.width and canvas.height to the desired display size in pixels.
• Use clientWidth and clientHeight to get the actual on-screen size.
• Call resizeCanvas() on window resize to keep it responsive.
• For high-DPI screens, scale the internal resolution using devicePixelRatio .

Basically, responsive canvas = dynamic sizing redrawing DPI awareness. It takes a few extra steps, but once set up, it works reliably across devices.

The above is the detailed content of How to make an HTML5 canvas responsive. For more information, please follow other related articles on the PHP Chinese website!