diff --git a/public/assets/img/check.jpg b/public/assets/img/check.jpg
new file mode 100644
index 00000000..83c66d2f
Binary files /dev/null and b/public/assets/img/check.jpg differ
diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 0b6e30f7..54216362 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -154,6 +154,7 @@ export default function Roof2() {
       canvas?.add(polygon)
 
       polygon.drawOuterLine(-50)
+      addBackgroundInPolygon(polygon)
 
       console.log(polygon.outerPolygon)
     }
@@ -182,6 +183,20 @@ export default function Roof2() {
     }
   }
 
+  const addBackgroundInPolygon = (polygon) => {
+    fabric.Image.fromURL('assets/img/check.jpg', function (img) {
+      // 패턴 객체를 생성합니다.
+      const pattern = new fabric.Pattern({
+        source: img.getElement(),
+        repeat: 'repeat',
+      })
+
+      polygon.fillBackground(pattern)
+
+      console.log(polygon)
+    })
+  }
+
   return (
     <>
       {canvas && (
diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index cc8bbce8..b20350b5 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -24,7 +24,7 @@ export default class QPolygon extends fabric.Group {
     this.fontSize = options.fontSize
     this.points = points
     this.polygon = polygon
-    this.canvas = canvas
+    // this.canvas = canvas
 
     this.#init()
     this.#addEvent()
@@ -317,4 +317,9 @@ export default class QPolygon extends fabric.Group {
     this.addWithUpdate(outPolygon)
     this.canvas.renderAll()
   }
+
+  fillBackground(pattern) {
+    this.polygon.set({ fill: pattern })
+    this.canvas.renderAll()
+  }
 }
diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js
index f1b98031..5f44060a 100644
--- a/src/hooks/useCanvas.js
+++ b/src/hooks/useCanvas.js
@@ -8,6 +8,9 @@ import {
 
 import { useRecoilState } from 'recoil'
 import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
+import QPolygon from '@/components/fabric/QPolygon'
+import { QLine } from '@/components/fabric/QLine'
+import QRect from '@/components/fabric/QRect'
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useState()
@@ -35,6 +38,10 @@ export function useCanvas(id) {
     fabric.Object.prototype.cornerStrokeColor = '#2BEBC8'
     fabric.Object.prototype.cornerSize = 6
 
+    QPolygon.prototype.canvas = c
+    QLine.prototype.canvas = c
+    QRect.prototype.canvas = c
+
     setCanvas(c)
     return () => {
       c.dispose()