From 0fbbf82374205a2f5e756e99967f34b90c9892ea Mon Sep 17 00:00:00 2001
From: Ahmed Mostafa <ahmed.mostafa1198@gmail.com>
Date: Thu, 9 Feb 2023 14:00:41 +0200
Subject: [PATCH] Fix (Canvas): Issue of sometimes the canvas don't draw the
 image cause of the canvas dimensions are not set (Issue #251)

---
 .../src/components/MainCanvas/index.jsx              | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx b/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx
index c87ec1ed..2d2d16a6 100644
--- a/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx
+++ b/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx
@@ -1,5 +1,5 @@
 /** External Dependencies */
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 /** Internal Dependencies */
 import { DesignLayer, TransformersLayer } from 'components/Layers';
@@ -13,6 +13,7 @@ import { CanvasContainer, StyledOrignalImage } from './MainCanvas.styled';
 const MainCanvas = () => {
   const [observeResize] = useResizeObserver();
   const providedAppContext = useStore();
+  const canvasContainerRef = useRef(null);
 
   const setNewCanvasSize = useCallback(
     ({ width: containerWidth, height: containerHeight }) => {
@@ -27,15 +28,12 @@ const MainCanvas = () => {
     [],
   );
 
-  const observeCanvasContainerResizing = useCallback((element) => {
-    observeResize(element, setNewCanvasSize);
+  useEffect(() => {
+    observeResize(canvasContainerRef.current, setNewCanvasSize);
   }, []);
 
   return (
-    <CanvasContainer
-      className="FIE_canvas-container"
-      ref={observeCanvasContainerResizing}
-    >
+    <CanvasContainer className="FIE_canvas-container" ref={canvasContainerRef}>
       {!providedAppContext.textIdOfEditableContent && <NodeControls />}
       {providedAppContext.isShowOriginalImage && (
         <StyledOrignalImage