Is this canvas resize hook a useful addition?

[petervdn]

I'm using this in a personal project, was wondering if it could be of use here.

type Props = {
  width: number;
  height: number;
  canvasRef: RefObject<HTMLCanvasElement | null>;
};

export function useSizedCanvas({ canvasRef, height, width }: Props) {
  useEffect(() => {
    if (!canvasRef.current) {
      return;
    }

    canvasRef.current.style.width = `${width}px`;
    canvasRef.current.style.height = `${height}px`;
    canvasRef.current.width = width * window.devicePixelRatio;
    canvasRef.current.height = height * window.devicePixelRatio;
  }, [width, height, canvasRef]);
}

[ReneDrie]

I think this definitely could be yeah! But I would maybe even expand it and have a useCanvas hook or something. Doing this and also returning a ref with the context perhaps?

I use this in my project:

export function useCanvas(
  wrapperRef: RefObject<HTMLElement>,
  canvasElement: RefObject<HTMLCanvasElement>,
): {
  contextRef: MutableRefObject<CanvasRenderingContext2D | null>;
} {
  const contextRef = useRef<CanvasRenderingContext2D | null>(null);

  const onResize = useCallback(() => {
    if (!wrapperRef.current || !canvasElement.current) {
      return;
    }
    const { clientWidth, clientHeight } = wrapperRef.current;
    const { devicePixelRatio } = window;
    canvasElement.current.width = clientWidth * devicePixelRatio;
    canvasElement.current.height = clientHeight * devicePixelRatio;
  }, [wrapperRef.current]);

  useResizeObserver(wrapperRef, onResize);

  useMount(() => {
    contextRef.current = canvasElement.current?.getContext('2d') ?? null;
  });

  return {
    contextRef,
  };
}

[petervdn]

Why is that not in the hooks lib yet? :)