Adjust the size of the canvas element based on changes to its parent's dimensions

Question

Adjust the size of the canvas element based on changes to its parent's dimensions

I am working with an application that includes a div containing a canvas element to display an image. Additionally, there is a sidebar that can be hidden with the click of a button, causing all other elements to resize and adjust to the remaining space.

While this resizing behavior works well for elements with width/height set as percentages, it does not seem to apply to the canvas element itself.

The div structure I currently have is as follows:

<div id="background-img" class="image-div"></div>

.image-div {
  height: inherit;
  width: 100%;
  margin-top: 25px;
  position: absolute;
}

The initial height of the div is 305px but changes to 375px when the sidebar is hidden.

Below is the code used to create the canvas:

const imgDiv = document.getElementById('background-img');
if (imgDiv) {
  const blob = new Blob([svg], { type: 'image/svg+xml' });
  const url = URL.createObjectURL(blob);

  const canvas = document.createElement('canvas');
  canvas.className = 'canvas-background';
  canvas.id = 'canvas-id';
  const ctx = canvas.getContext('2d');

  canvas.width = imgDiv.clientWidth;
  canvas.height = imgDiv.clientHeight;

  const img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  };
  img.src = url;
  imgDiv.appendChild(canvas);
}

No additional CSS styles are applied to the canvas elsewhere in the code.

I'm seeking a way to enable the canvas to automatically resize itself whenever its parent's width and height change. This should include functionality for zooming in/out on the page, similar to how it behaves on Chrome with divs or img elements. Any guidance on achieving this would be greatly appreciated.

javascript canvas

Answer 1

Answer №1

Currently, there isn't a straightforward solution to achieve this task. One might instinctively seek a resize event on an element, but such events are typically applicable only to the window, as elaborated in this MDN article.

After conducting thorough research and exploring various discussions, I have identified a few options for your consideration.

Continuous Loop Approach

You can render the image within a recursive function that continuously monitors the dimensions of the imgDiv as it draws itself.

CSS:

canvas {
    width: 100%;
    height: 100%;
}

JS:

function draw(ctx, imgDiv, img) {
    ctx.canvas.width = imgDiv.offsetWidth;
    ctx.canvas.height = imgDiv.offsetheight;
    ctx.drawImage(img, 0, 0);
    requestAnimationFrame(() => {
        draw(ctx, imgDiv, img);
    });
}

img.onload = function() {
    draw(ctx, imgDiv, img);
};

While this approach constantly processes updates, it may impact performance due to its resource-intensive nature. The use of requestAnimationFrame optimizes performance by syncing with the display's refresh rate, typically around 60 times per second.

ResizeObserver (Experimental)

This method introduces the novel concept of ResizeObserver, similar to other observer APIs like IntersectionObserver, PerformanceObserver, and MutationObserver. It tracks resizing changes in elements and triggers callbacks accordingly.

Implementation example:

const observer = new ResizeObserver(entries => {
    entries.forEach(entry => {
        // Update the canvas dimensions.
    });
});

// Observe the resizing of the image-div.
observer.observe(imgDiv);

Due to its experimental status, caution is advised when considering this approach, despite its applicability to your scenario. For details on browser support and usage guidelines, refer to resources such as Caniuse and Alligator.io.

Utilize the resize Event on window

This option primarily focuses on window or document width adjustments, requiring additional modifications for scenarios like sidebar expansions or contractions.

window.addEventListener('resize', (event) => {
    requestAnimationFrame(() => {
        // Update the canvas dimensions.
    });
});

For optimal performance, incorporating requestAnimationFrame here is crucial, considering that the resize event occurs for every pixel adjustment and may hinder efficiency.

Edit Note:

Although Artyomska has apparently resolved the issue, I am sharing my findings in case this discussion proves beneficial for future inquiries.

Answer 2

Currently, there isn't a straightforward solution to achieve this task. One might instinctively seek a resize event on an element, but such events are typically applicable only to the window, as elaborated in this MDN article.

After conducting thorough research and exploring various discussions, I have identified a few options for your consideration.

Continuous Loop Approach

You can render the image within a recursive function that continuously monitors the dimensions of the imgDiv as it draws itself.

CSS:

canvas {
    width: 100%;
    height: 100%;
}

JS:

function draw(ctx, imgDiv, img) {
    ctx.canvas.width = imgDiv.offsetWidth;
    ctx.canvas.height = imgDiv.offsetheight;
    ctx.drawImage(img, 0, 0);
    requestAnimationFrame(() => {
        draw(ctx, imgDiv, img);
    });
}

img.onload = function() {
    draw(ctx, imgDiv, img);
};

While this approach constantly processes updates, it may impact performance due to its resource-intensive nature. The use of requestAnimationFrame optimizes performance by syncing with the display's refresh rate, typically around 60 times per second.

ResizeObserver (Experimental)

This method introduces the novel concept of ResizeObserver, similar to other observer APIs like IntersectionObserver, PerformanceObserver, and MutationObserver. It tracks resizing changes in elements and triggers callbacks accordingly.

Implementation example:

const observer = new ResizeObserver(entries => {
    entries.forEach(entry => {
        // Update the canvas dimensions.
    });
});

// Observe the resizing of the image-div.
observer.observe(imgDiv);

Due to its experimental status, caution is advised when considering this approach, despite its applicability to your scenario. For details on browser support and usage guidelines, refer to resources such as Caniuse and Alligator.io.

Utilize the resize Event on window

This option primarily focuses on window or document width adjustments, requiring additional modifications for scenarios like sidebar expansions or contractions.

window.addEventListener('resize', (event) => {
    requestAnimationFrame(() => {
        // Update the canvas dimensions.
    });
});

For optimal performance, incorporating requestAnimationFrame here is crucial, considering that the resize event occurs for every pixel adjustment and may hinder efficiency.

Edit Note:

Although Artyomska has apparently resolved the issue, I am sharing my findings in case this discussion proves beneficial for future inquiries.

Adjust the size of the canvas element based on changes to its parent's dimensions

Answer №1

Similar questions

Guide on Adding Tawk.to Widget to Your Next.JS Website

Utilizing SVG within Sproutcore allows for seamless access to DOM nodes and the ability to effortlessly bind Sproutcore events directly to the DOM

Can any function be used to define the path in ExpressJS when setting up GET routes?

The mouse movement event will not be triggered for every frame when a keyboard event occurs

What is the best way to pass a variable in an AJAX function call when making a POST request?

Tips on extracting code differences from code inspector

Is there a way for me to access the user's gender and birthday following their login using their Google account details?

Reactjs Invariant Violation caused by the npm package (react-loader)

The functionality of returning false on ajax response does not effectively prevent the form from submitting

Having trouble retrieving data from the MongoDB database using Node.js

[.TextureUnitWarning] ALERT: Unit 1 is lacking a texture binding for rendering test.html:1

A detailed guide on sending Joomla form information to a controller function using Ajax communication

Using regular expressions, you can conveniently extract text that is contained within paragraph tags

In Pure JavaScript, an HTML element is added every time the click event is triggered

What is the best way to utilize bilinear color interpolation with JavaScript?

Anticipating the arrival of an external JavaScript file in the child component

When running grunt-bower, I am encountering an error stating that _.object is not a function

Utilizing Navigate and useState for Conditional Routing in React

Using Jquery .ajax to Populate Select Dropdown with JSON Data

Alert: Unauthorized hook call and Exception: Cannot access properties of null (reading 'useState')