Allow resizing the canvas

[FredrikMeyer]

Some ideas from ChatGPT

import React, { useRef, useEffect } from 'react';
import ResizeObserver from 'resize-observer-polyfill';

function MyComponent() {
  const ref = useRef(null);

  useEffect(() => {
    const element = ref.current;

    // Create a new ResizeObserver instance
    const resizeObserver = new ResizeObserver(entries => {
      // Iterate over the entries and handle size changes
      entries.forEach(entry => {
        console.log('Size changed:', entry.contentRect.width, entry.contentRect.height);
        // Perform any actions you want when size changes
      });
    });

    // Start observing the target element
    resizeObserver.observe(element);

    // Clean up the observer when the component is unmounted
    return () => {
      resizeObserver.unobserve(element);
      resizeObserver.disconnect();
    };
  }, []);

  return <div ref={ref}>Resizable Component</div>;
}

And:

function resizeCanvas(canvas, newWidth, newHeight) {
  // Create a new canvas element
  const newCanvas = document.createElement('canvas');
  
  // Set the new canvas dimensions
  newCanvas.width = newWidth;
  newCanvas.height = newHeight;
  
  // Get the 2D rendering context of the new canvas
  const context = newCanvas.getContext('2d');
  
  // Copy the content from the original canvas to the new canvas
  context.drawImage(canvas, 0, 0, newWidth, newHeight);
  
  // Replace the original canvas with the new canvas
  canvas.parentNode.replaceChild(newCanvas, canvas);
}

// Example usage
const originalCanvas = document.getElementById('myCanvas');
resizeCanvas(originalCanvas, 800, 600);