Use a raster for the guid layer background

package.json

@@ -77,6 +77,7 @@
     "style-loader": "^0.18.0",
     "svg-url-loader": "^2.2.0",
     "tap": "^10.2.0",
+    "url-loader": "^0.6.2",
     "webpack": "^3.5.4",
     "webpack-dev-server": "^2.7.0"
   },

src/helper/layer.js

@@ -1,4 +1,5 @@
 import paper from '@scratch/paper';
+import canvasBg from './background.png';
 
 const getGuideLayer = function () {
     for (let i = 0; i < paper.project.layers.length; i++) {
@@ -31,20 +32,18 @@ const _makePaintingLayer = function () {
 };
 
 const _makeBackgroundGuideLayer = function () {
-    const BLOCK_WIDTH = 4;
     const guideLayer = new paper.Layer();
     guideLayer.locked = true;
-    for (let i = 0; i < 500 / BLOCK_WIDTH; i += 2) {
-        for (let j = 0; j < 400 / BLOCK_WIDTH; j++) {
-            const rect = new paper.Shape.Rectangle(
-                new paper.Point((i + (j % 2)) * BLOCK_WIDTH, j * BLOCK_WIDTH),
-                new paper.Point((i + (j % 2) + 1) * BLOCK_WIDTH, (j + 1) * BLOCK_WIDTH)
-            );
-            rect.fillColor = '#E5E5E5';
-            rect.guide = true;
-            rect.locked = true;
-        }
-    }
+    const img = new Image();
+    img.src = canvasBg;
+    img.onload = () => {
+        const raster = new paper.Raster(img);
+        raster.parent = guideLayer;
+        raster.guide = true;
+        raster.locked = true;
+        raster.position = paper.view.center;
+        raster.sendToBack();
+    };
 
     const vLine = new paper.Path.Line(new paper.Point(0, -7), new paper.Point(0, 7));
     vLine.strokeWidth = 2;

webpack.config.js

@@ -50,6 +50,10 @@ const base = {
                 }
             }]
         },
+        {
+            test: /\.png$/i,
+            loader: 'url-loader'
+        },
         {
             test: /\.svg$/,
             loader: 'svg-url-loader?noquotes'