From 99a9f015eb23c6da074ea68c159c0ece7884f7e0 Mon Sep 17 00:00:00 2001
From: julienfumanti <julien.fumanti@gmail.com>
Date: Mon, 24 Apr 2017 23:36:39 +0200
Subject: [PATCH 1/2] display grid in background

User decides to show or not a grid view in background
---
 lib/index.jsx | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 package.json  |  2 +-
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/lib/index.jsx b/lib/index.jsx
index 6036eec..6795bd4 100644
--- a/lib/index.jsx
+++ b/lib/index.jsx
@@ -5,6 +5,8 @@ const PropTypes = React.PropTypes;
 
 const DrawableCanvas = React.createClass({
   propTypes: {
+    gridView: PropTypes.bool,
+    gap: PropTypes.number,
     brushColor: PropTypes.string,
     lineWidth: PropTypes.number,
     canvasStyle: PropTypes.shape({
@@ -15,6 +17,8 @@ const DrawableCanvas = React.createClass({
   },
   getDefaultProps() {
     return {
+      gridView: false,
+      gap: 50,
       brushColor: '#000000',
       lineWidth: 4,
       canvasStyle: {
@@ -44,6 +48,23 @@ const DrawableCanvas = React.createClass({
 
     let ctx = canvas.getContext('2d');
 
+    if (this.props.gridView) {
+        // to display the grid
+        let ecart = this.props.gap; //lenght of the cases
+        //rows
+        for(let h = ecart ; h < canvas.height ; h += ecart) {
+            ctx.moveTo(0, h); // move ctx to (x,y) without drawing
+            ctx.lineTo(canvas.width, h); //drawing to (x,y)
+        }
+        //cell
+        for(let w = ecart ; w < canvas.width ; w += ecart) {
+            ctx.moveTo(w, 0);
+            ctx.lineTo(w, canvas.height);
+        }
+        ctx.stroke();
+    }
+
+
     this.setState({
       canvas: canvas,
       context: ctx
@@ -115,6 +136,35 @@ const DrawableCanvas = React.createClass({
     let width = this.state.context.canvas.width;
     let height = this.state.context.canvas.height;
     this.state.context.clearRect(0, 0, width, height);
+
+    if (this.props.gridView) {
+        // to display the grid
+        let canvas = ReactDOM.findDOMNode(this);
+
+        // to avoid that the rectangle is growing up
+        canvas.width  = canvas.width;
+        canvas.height = canvas.height;
+        //
+        let ctx = canvas.getContext('2d');
+
+        // to display the grid
+        let ecart = this.props.gap; //lenght of the cases
+        //rows
+        for(let h = ecart ; h < this.state.canvas.height ; h += ecart) {
+            ctx.moveTo(0, h); // move ctx to (x,y) without drawing
+            ctx.lineTo(this.state.canvas.width, h); //drawing to (x,y)
+        }
+        //cell
+        for(let w = ecart ; w < this.state.canvas.width ; w += ecart) {
+            ctx.moveTo(w, 0);
+            ctx.lineTo(w, this.state.canvas.height);
+        }
+        ctx.stroke();
+
+        this.setState({
+            context: ctx
+        });
+    }
   },
   getDefaultStyle(){
     return {
diff --git a/package.json b/package.json
index ce9f2cf..ecc1bae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-drawable-canvas",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A React.js component for drawable canvas.",
   "main": "lib/index.js",
   "scripts": {

From 3a9603a1c43557973bff9ed74f59883bdca7f56f Mon Sep 17 00:00:00 2001
From: julienfumanti <julien.fumanti@gmail.com>
Date: Mon, 24 Apr 2017 23:40:56 +0200
Subject: [PATCH 2/2] grid option

grid view option within style
---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index c4650c3..974e9ae 100644
--- a/README.md
+++ b/README.md
@@ -30,6 +30,8 @@ Default props is white background with black brush, size 4.
 **Add custom styles in the canvasStyle object.**
 ```js
 {
+  gridView:true,
+  gap: 50,
   brushColor: '#000000',
   lineWidth: 4,
   canvasStyle: {