Don't use translates and rotates for drawing rotated rectangles

diff --git a/src/elements/element.point.js b/src/elements/element.point.js
index f96207713ea5f45f2ae55f59f855c57c570cb969..3290041b2b9abe390b1b2789b7cb24323ecfd52e 100644 (file)
--- a/src/elements/element.point.js
+++ b/src/elements/element.point.js
@@ -88,12 +88,14 @@ module.exports = function(Chart) {
                                ctx.strokeRect(x - size, y - size, 2 * size, 2 * size);
                                break;
                        case 'rectRot':
-                               ctx.translate(x, y);
-                               ctx.rotate(Math.PI / 4);
                                size = 1 / Math.SQRT2 * radius;
-                               ctx.fillRect(-size, -size, 2 * size, 2 * size);
-                               ctx.strokeRect(-size, -size, 2 * size, 2 * size);
-                               ctx.setTransform(1, 0, 0, 1, 0, 0);
+                               ctx.beginPath();
+                               ctx.moveTo(x - size, y);
+                               ctx.lineTo(x, y + size);
+                               ctx.lineTo(x + size, y);
+                               ctx.lineTo(x, y - size);
+                               ctx.closePath();
+                               ctx.fill();
                                break;
                        case 'cross':
                                ctx.beginPath();

diff --git a/test/element.point.tests.js b/test/element.point.tests.js
index 66d7054c7befec7c84c8dcb1a0c1aacda9567d96..674682660caefcf0a4e6eae4b97068f52a59cb2b 100644 (file)
--- a/test/element.point.tests.js
+++ b/test/element.point.tests.js
@@ -189,20 +189,26 @@ describe('Point element tests', function() {
                        name: 'setFillStyle',
                        args: ['rgba(0, 255, 0)']
                }, {
-                       name: 'translate',
-                       args: [10, 15]
+                       name: 'beginPath',
+                       args: []
                }, {
-                       name: 'rotate',
-                       args: [Math.PI / 4]
+                       name: 'moveTo',
+                       args: [10 - 1 / Math.SQRT2 * 2, 15]
                }, {
-                       name: 'fillRect',
-                       args: [-1 / Math.SQRT2 * 2, -1 / Math.SQRT2 * 2, 2 / Math.SQRT2 * 2, 2 / Math.SQRT2 * 2],
+                       name: 'lineTo',
+                       args: [10, 15 + 1 / Math.SQRT2 * 2]
                }, {
-                       name: 'strokeRect',
-                       args: [-1 / Math.SQRT2 * 2, -1 / Math.SQRT2 * 2, 2 / Math.SQRT2 * 2, 2 / Math.SQRT2 * 2],
+                       name: 'lineTo',
+                       args: [10 + 1 / Math.SQRT2 * 2, 15],
                }, {
-                       name: 'setTransform',
-                       args: [1, 0, 0, 1, 0, 0],
+                       name: 'lineTo',
+                       args: [10, 15 - 1 / Math.SQRT2 * 2],
+               }, {
+                       name: 'closePath',
+                       args: []
+               }, {
+                       name: 'fill',
+                       args: [],
                }, {
                        name: 'stroke',
                        args: []