Brush problems (fabricjs#4938)

thiagocunha · May 8, 2018 · 88e33c0 · 88e33c0
1 parent d91b34c
commit 88e33c0
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js
@@ -45,16 +45,24 @@
      */
     onMouseMove: function(pointer) {
       if (this._captureDrawingPath(pointer) && this._points.length > 1) {
-        var points = this._points, length = points.length, ctx = this.canvas.contextTop;
-        // draw the curve update
-        this._saveAndTransform(ctx);
-        if (this.oldEnd) {
-          ctx.beginPath();
-          ctx.moveTo(this.oldEnd.x, this.oldEnd.y);
+        if (this.needsFullRender) {
+          // redraw curve
+          // clear top canvas
+          this.canvas.clearContext(this.canvas.contextTop);
+          this._render();
+        }
+        else {
+          var points = this._points, length = points.length, ctx = this.canvas.contextTop;
+          // draw the curve update
+          this._saveAndTransform(ctx);
+          if (this.oldEnd) {
+            ctx.beginPath();
+            ctx.moveTo(this.oldEnd.x, this.oldEnd.y);
+          }
+          this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true);
+          ctx.stroke();
+          ctx.restore();
         }
-        this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true);
-        ctx.stroke();
-        ctx.restore();
       }
     },
 
@@ -98,6 +106,8 @@
     _reset: function() {
       this._points.length = 0;
       this._setBrushStyles();
+      var color = new fabric.Color(this.color);
+      this.needsFullRender = (color.getAlpha() < 1);
       this._setShadow();
     },
 

diff --git a/src/canvas.class.js b/src/canvas.class.js
@@ -377,7 +377,9 @@
         this.clearContext(this.contextTop);
         this.contextTopDirty = false;
       }
-      this.renderTopLayer(this.contextTop);
+      if (this.hasLostContext) {
+        this.renderTopLayer(this.contextTop);
+      }
       var canvasToDrawOn = this.contextContainer;
       this.renderCanvas(canvasToDrawOn, this._chooseObjectsToRender());
       return this;

diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js
@@ -599,6 +599,7 @@
         if (!options.cssOnly) {
           this._setBackstoreDimension(prop, dimensions[prop]);
           cssValue += 'px';
+          this.hasLostContext = true;
         }
 
         if (!options.backstoreOnly) {