Version 3.6.2

CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [4.0.0-beta.5]
+
+fix(fabric.Object): getObjectScaling takes in account rotation of objects inside groups. [#6118](https://github.com/fabricjs/fabric.js/pull/6118)
+
+## [4.0.0-beta.4]
+
+fix(fabric.Group): will draw shadow will call parent method. [#6116](https://github.com/fabricjs/fabric.js/pull/6116)
+
+## [4.0.0-beta.3]
+
+fix(controls): control offset rendering code had extras `beginPath` that would clear all but not the last of them [#6114](https://github.com/fabricjs/fabric.js/pull/6114)
+
+## [4.0.0-beta.2]
+
+fix(controls): Control.getVisibility will always receive the fabric.Object argument.
+
+## [4.0.0-beta.1]
+
+breaking: All your old control code override will not work
+breaking: `uniScaleTransform` has been renamed in `uniformScaling`, meaning changed and  the default  value swapped. The behaviour is unchanged, but now the description and the name match.
+breaking: LockScalingFlip with the scaling flip behaviour are missing now, maybe reimplemented later.
+breaking: Object.lockUniScaling is removed. Alternatives to get the same identical functionality with less code are being evaluated.
+breaking: Canvas.onBeforeScaleRotate is removed, developers need to migrate to the event `before:transform’
+
+## [3.6.2]
+- fix fabric.Object.toDataURL blurriness on images with odd pixel number [#6131](https://github.com/fabricjs/fabric.js/pull/6131)
+
 ## [3.6.1]
 - fix(gradient, text): ISSUE-6014 ISSUE-6077 support percentage gradient in text [#6090](https://github.com/fabricjs/fabric.js/pull/6090)
 - fix(filters): ISSUE-6072 convolution filter is off by one [#6088](https://github.com/fabricjs/fabric.js/pull/6088)

HEADER.js

@@ -1,6 +1,6 @@
 /*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: '3.6.1' };
+var fabric = fabric || { version: '3.6.2' };
 if (typeof exports !== 'undefined') {
   exports.fabric = fabric;
 }

dist/fabric.js

@@ -1,7 +1,7 @@
 /* build: `node build.js modules=ALL exclude=gestures,accessors requirejs minifier=uglifyjs` */
 /*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: '3.6.1' };
+var fabric = fabric || { version: '3.6.2' };
 if (typeof exports !== 'undefined') {
   exports.fabric = fabric;
 }
@@ -9362,38 +9362,40 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
    * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#canvas}
    * @see {@link fabric.Canvas#initialize} for constructor definition
    *
-   * @fires object:modified
-   * @fires object:rotated
-   * @fires object:scaled
-   * @fires object:moved
-   * @fires object:skewed
-   * @fires object:rotating
-   * @fires object:scaling
-   * @fires object:moving
-   * @fires object:skewing
+   * @fires object:modified at the end of a transform or any change when statefull is true
+   * @fires object:rotated at the end of a rotation transform
+   * @fires object:scaled at the end of a scale transform
+   * @fires object:moved at the end of translation transform
+   * @fires object:skewed at the end of a skew transform
+   * @fires object:rotating while an object is being rotated from the control
+   * @fires object:scaling while an object is being scaled by controls
+   * @fires object:moving while an object is being dragged
+   * @fires object:skewing while an object is being skewed from the controls
    * @fires object:selected this event is deprecated. use selection:created
    *
-   * @fires before:transform
+   * @fires before:transform before a transform is is started
    * @fires before:selection:cleared
    * @fires selection:cleared
    * @fires selection:updated
    * @fires selection:created
    *
-   * @fires path:created
+   * @fires path:created after a drawing operation ends and the path is added
    * @fires mouse:down
    * @fires mouse:move
    * @fires mouse:up
-   * @fires mouse:down:before
-   * @fires mouse:move:before
-   * @fires mouse:up:before
+   * @fires mouse:down:before  on mouse down, before the inner fabric logic runs
+   * @fires mouse:move:before on mouse move, before the inner fabric logic runs
+   * @fires mouse:up:before on mouse up, before the inner fabric logic runs
    * @fires mouse:over
    * @fires mouse:out
-   * @fires mouse:dblclick
+   * @fires mouse:dblclick whenever a native dbl click event fires on the canvas.
    *
    * @fires dragover
    * @fires dragenter
    * @fires dragleave
    * @fires drop
+   * @fires after:render at the end of the render process, receives the context in the callback
+   * @fires before:render at start the render process, receives the context in the callback
    *
    */
   fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ {
@@ -14485,7 +14487,8 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
           // skip canvas zoom and calculate with setCoords now.
           boundingRect = this.getBoundingRect(true, true),
           shadow = this.shadow, scaling,
-          shadowOffset = { x: 0, y: 0 }, shadowBlur;
+          shadowOffset = { x: 0, y: 0 }, shadowBlur,
+          width, height;
 
       if (shadow) {
         shadowBlur = shadow.blur;
@@ -14499,10 +14502,12 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
         shadowOffset.x = 2 * Math.round(abs(shadow.offsetX) + shadowBlur) * (abs(scaling.scaleX));
         shadowOffset.y = 2 * Math.round(abs(shadow.offsetY) + shadowBlur) * (abs(scaling.scaleY));
       }
-      el.width = boundingRect.width + shadowOffset.x;
-      el.height = boundingRect.height + shadowOffset.y;
-      el.width += el.width % 2 ? 2 - el.width % 2 : 0;
-      el.height += el.height % 2 ? 2 - el.height % 2 : 0;
+      width = boundingRect.width + shadowOffset.x;
+      height = boundingRect.height + shadowOffset.y;
+      // if the current width/height is not an integer
+      // we need to make it so.
+      el.width = Math.ceil(width);
+      el.height = Math.ceil(height);
       var canvas = new fabric.StaticCanvas(el, {
         enableRetinaScaling: false,
         renderOnAddRemove: false,

package.json

@@ -2,7 +2,7 @@
   "name": "fabric",
   "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
   "homepage": "http://fabricjs.com/",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "authors": "Juriy Zaytsev <[email protected]>",
   "contributors": [
     {

src/shapes/object.class.js

@@ -1727,7 +1727,8 @@
           // skip canvas zoom and calculate with setCoords now.
           boundingRect = this.getBoundingRect(true, true),
           shadow = this.shadow, scaling,
-          shadowOffset = { x: 0, y: 0 }, shadowBlur;
+          shadowOffset = { x: 0, y: 0 }, shadowBlur,
+          width, height;
 
       if (shadow) {
         shadowBlur = shadow.blur;
@@ -1741,10 +1742,12 @@
         shadowOffset.x = 2 * Math.round(abs(shadow.offsetX) + shadowBlur) * (abs(scaling.scaleX));
         shadowOffset.y = 2 * Math.round(abs(shadow.offsetY) + shadowBlur) * (abs(scaling.scaleY));
       }
-      el.width = boundingRect.width + shadowOffset.x;
-      el.height = boundingRect.height + shadowOffset.y;
-      el.width += el.width % 2 ? 2 - el.width % 2 : 0;
-      el.height += el.height % 2 ? 2 - el.height % 2 : 0;
+      width = boundingRect.width + shadowOffset.x;
+      height = boundingRect.height + shadowOffset.y;
+      // if the current width/height is not an integer
+      // we need to make it so.
+      el.width = Math.ceil(width);
+      el.height = Math.ceil(height);
       var canvas = new fabric.StaticCanvas(el, {
         enableRetinaScaling: false,
         renderOnAddRemove: false,

test/visual/toDataURL.js

@@ -50,7 +50,7 @@
     code: toDataURL1,
     golden: 'dataurl1.png',
     newModule: 'DataURL exports',
-    percentage: 0.09,
+    percentage: 0.10,
     beforeEachHandler: function() {
       fabric.Object.prototype.objectCaching = false;
     }
@@ -74,7 +74,7 @@
     test: 'Text to DataURL with shadow no offset',
     code: toDataURL2,
     golden: 'dataurl2.png',
-    percentage: 0.09,
+    percentage: 0.10,
   });
 
   function toDataURL3(canvas, callback) {
@@ -344,6 +344,90 @@
     height: 300,
   });
 
+  function toDataURLWithOddPixels(fabricCanvas, callback) {
+    var imgsrc =
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABjAQMAAAC19SzWAAAABlBMVEUAAAD///+l2Z/dAAAAG0lEQVR4XmNABf+RwANqyI3KjcqNyo3KjcoBACFidLMGY3BLAAAAAElFTkSuQmCC';
+    var imageEl = fabric.util.createImage();
+    imageEl.onload = function() {
+      var fimg = new fabric.Image(imageEl);
+      callback(fimg.toDataURL());
+    };
+    imageEl.src = imgsrc;
+  }
+
+  tests.push({
+    test: 'images with odd pixels will render crisp',
+    code: toDataURLWithOddPixels,
+    // use the same golden on purpose
+    golden: 'dataurl13.png',
+    percentage: 0.09,
+    width: 99,
+    height: 99,
+  });
+
+  function toDataURLWithEvenPixels(fabricCanvas, callback) {
+    var imgsrc =
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAABlBMVEUAAAD///+l2Z/dAAAAG0lEQVR4XmNABf+RwAfqy43KjcqNyo3KjcoBAEFzhKc6XssoAAAAAElFTkSuQmCC';
+    var imageEl = fabric.util.createImage();
+    imageEl.onload = function() {
+      var fimg = new fabric.Image(imageEl);
+      callback(fimg.toDataURL());
+    };
+    imageEl.src = imgsrc;
+  }
+
+  tests.push({
+    test: 'images with even pixels will render crisp',
+    code: toDataURLWithEvenPixels,
+    // use the same golden on purpose
+    golden: 'dataurl14.png',
+    percentage: 0.09,
+    width: 100,
+    height: 100,
+  });
+
+  function toDataURLWithOddPixelsStrokeWidth(fabricCanvas, callback) {
+    var imgsrc =
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABjAQMAAAC19SzWAAAABlBMVEUAAAD///+l2Z/dAAAAG0lEQVR4XmNABf+RwANqyI3KjcqNyo3KjcoBACFidLMGY3BLAAAAAElFTkSuQmCC';
+    var imageEl = fabric.util.createImage();
+    imageEl.onload = function() {
+      var fimg = new fabric.Image(imageEl, { strokeWidth: 1, stroke: 'orange' });
+      callback(fimg.toDataURL());
+    };
+    imageEl.src = imgsrc;
+  }
+
+  tests.push({
+    test: 'images with odd strokeWidth will not render crisp',
+    code: toDataURLWithOddPixelsStrokeWidth,
+    // use the same golden on purpose
+    golden: 'dataurl15.png',
+    percentage: 0.09,
+    disabled: true,
+    width: 100,
+    height: 100,
+  });
+
+  function toDataURLWithOddPixelsStrokeWidthEven(fabricCanvas, callback) {
+    var imgsrc =
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABjAQMAAAC19SzWAAAABlBMVEUAAAD///+l2Z/dAAAAG0lEQVR4XmNABf+RwANqyI3KjcqNyo3KjcoBACFidLMGY3BLAAAAAElFTkSuQmCC';
+    var imageEl = fabric.util.createImage();
+    imageEl.onload = function() {
+      var fimg = new fabric.Image(imageEl, { strokeWidth: 2, stroke: 'orange' });
+      callback(fimg.toDataURL());
+    };
+    imageEl.src = imgsrc;
+  }
+
+  tests.push({
+    test: 'images with even strokeWidth will render crisp',
+    code: toDataURLWithOddPixelsStrokeWidthEven,
+    // use the same golden on purpose
+    golden: 'dataurl16.png',
+    percentage: 0.09,
+    width: 100,
+    height: 100,
+  });
 
   function testWrapper(test) {
     var actualTest = test.code;