Add resizable canvas option

[vinothpandian]

The withViewBox property works to scale everything up/down on resize. but then when you add another stroke to the canvas after resizing, all strokes on the canvas "shift" and I encounter the same problem where the strokes all get cut off

Originally posted by @dereklance in #116 (reply in thread)

[suciueus]

is there a plan to solve this one?

[xjamundx]

Just running into this today

[eusebiusuciuengage]

@xjamundx Going to react-sketch-canvas/src/Canvas/index.tsx and changing method getCoordinates to this (below) will fix it. But I didn't investigate what impact it has on other features etc. so use with caution:

  const getCoordinates = useCallback(
    (pointerEvent: React.PointerEvent<HTMLDivElement>): Point => {
      const boundingArea = canvasRef.current?.getBoundingClientRect();
      canvasSizeRef.current = boundingArea
        ? {
          width: boundingArea.width,
          height: boundingArea.height,
        }
        : null;

      if (!boundingArea) {
        return { x: 0, y: 0 };
      }

      if (!canvasRef.current) {
        return { x: 0, y: 0 };
      }

      const svgCanvas = canvasRef?.current?.firstChild as SVGSVGElement;
      let point = svgCanvas?.createSVGPoint();

      if (!point) {
        return { x: 0, y: 0 };
      }

      point.x = pointerEvent.pageX;
      point.y = pointerEvent.pageY;
      point = point.matrixTransform(svgCanvas?.getScreenCTM()?.inverse());

      return {
        x: point.x,
        y: point.y
      };
    },
    []
  );

[ZeroCho]

This happens because viewBox width & height change when you stroke after resizing window. ViewBox should not be changed after first stroke.