Can You Make an HTML5 Canvas Resize Seamlessly with the Browser Window?

The Solution: Automatic Scaling with CSS and JavaScript

The key lies in a combination of CSS and JavaScript:

1. JavaScript:

   • In your drawing function, adjust the width and height to match the current window dimensions:

     <code class="javascript">function draw() {
       var ctx = (your canvas context);
       ctx.canvas.width = window.innerWidth;
       ctx.canvas.height = window.innerHeight;
       // Drawing code here...
     }</code>

     Copy after login

2. CSS:

   • Define the CSS for the and its container:

     <code class="css">html, body {
       width: 100%;
       height: 100%;
       margin: 0;
     }</code>

     Copy after login

By setting the HTML and body elements to full width and height, the is constrained to fit within the window. The script adjusts its size dynamically to ensure a perfect fit at all times.

This solution has proven to have minimal performance impact, making it an efficient way to create resizable canvases.

The above is the detailed content of Can You Make an HTML5 Canvas Resize Seamlessly with the Browser Window?. For more information, please follow other related articles on the PHP Chinese website!