diff --git a/src/components/D2Panel.js b/src/components/D2Panel.js
index 9353f2c..2bc9012 100644
--- a/src/components/D2Panel.js
+++ b/src/components/D2Panel.js
@@ -20,6 +20,7 @@ import { PIXEL_RATIO } from '../constants/general';
 import ShapesManager from '../d2/ShapesManager.js';
 import EventGroup from '../d2/EventGroup.js';
 import ReactResizeDetector from 'react-resize-detector';
+import { load as loadPattern } from '../d2/Shape.js';
 // import createDebug from 'debug';
 // const debug = createDebug('d3d:d2');
 
@@ -91,6 +92,11 @@ class D2Panel extends React.Component {
     this.objectContainerInactive.add(new Grid(new CAL.Color(0xdddddd)));
 
     this.shapesManager = new ShapesManager(this.objectContainerActive, this.objectContainerInactive);
+    loadPattern.then(() => {
+      this.activeNeedRender = true;
+      this.inactiveNeedRender = true;
+      this.renderRequest();
+    });
 
     this.DOM = null;
   }
diff --git a/src/d2/Shape.js b/src/d2/Shape.js
index 3995fc4..ae092d9 100644
--- a/src/d2/Shape.js
+++ b/src/d2/Shape.js
@@ -9,8 +9,8 @@ import holePaternUrl from '../../img/holepatern.png';
 import { loadImage } from '../utils/imageUtils.js';
 
 let holePatern;
-loadImage(holePaternUrl).then(image => {
-  holePatern =  document.createElement('canvas').getContext('2d').createPattern(image, 'repeat')
+export const load = loadImage(holePaternUrl).then(image => {
+  holePatern = document.createElement('canvas').getContext('2d').createPattern(image, 'repeat');
 });
 
 export default class Shape extends Matrix {