Support rotation for pointStyle image (#6287)

diff --git a/src/helpers/helpers.canvas.js b/src/helpers/helpers.canvas.js
index b23c2ff821323ed60fa43a97e74f6bf503026490..00950f5621f4b0286b1fa57d9b68213bea30b05b 100644 (file)
--- a/src/helpers/helpers.canvas.js
+++ b/src/helpers/helpers.canvas.js
@@ -70,7 +70,11 @@ var exports = {
                if (style && typeof style === 'object') {
                        type = style.toString();
                        if (type === '[object HTMLImageElement]' || type === '[object HTMLCanvasElement]') {
-                               ctx.drawImage(style, x - style.width / 2, y - style.height / 2, style.width, style.height);
+                               ctx.save();
+                               ctx.translate(x, y);
+                               ctx.rotate(rad);
+                               ctx.drawImage(style, -style.width / 2, -style.height / 2, style.width, style.height);
+                               ctx.restore();
                                return;
                        }
                }

diff --git a/test/fixtures/element.point/point-style-image.js b/test/fixtures/element.point/point-style-image.js
new file mode 100644 (file)
index 0000000..7ed2d97
--- /dev/null
+++ b/test/fixtures/element.point/point-style-image.js
@@ -0,0 +1,58 @@
+var imageCanvas = document.createElement('canvas');
+var imageContext = imageCanvas.getContext('2d');
+
+imageCanvas.width = 40;
+imageCanvas.height = 40;
+
+imageContext.fillStyle = '#f00';
+imageContext.beginPath();
+imageContext.moveTo(20, 0);
+imageContext.lineTo(10, 40);
+imageContext.lineTo(20, 30);
+imageContext.closePath();
+imageContext.fill();
+
+imageContext.fillStyle = '#a00';
+imageContext.beginPath();
+imageContext.moveTo(20, 0);
+imageContext.lineTo(30, 40);
+imageContext.lineTo(20, 30);
+imageContext.closePath();
+imageContext.fill();
+
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       labels: [0, 1, 2, 3, 4, 5, 6, 7],
+                       datasets: [{
+                               data: [0, 0, 0, 0, 0, 0, 0, 0],
+                               showLine: false
+                       }]
+               },
+               options: {
+                       responsive: false,
+                       legend: false,
+                       title: false,
+                       elements: {
+                               point: {
+                                       pointStyle: imageCanvas,
+                                       rotation: [0, 45, 90, 135, 180, 225, 270, 315]
+                               }
+                       },
+                       layout: {
+                               padding: 20
+                       },
+                       scales: {
+                               xAxes: [{display: false}],
+                               yAxes: [{display: false}]
+                       }
+               }
+       },
+       options: {
+               canvas: {
+                       height: 256,
+                       width: 512
+               }
+       }
+};

diff --git a/test/fixtures/element.point/point-style-image.png b/test/fixtures/element.point/point-style-image.png
new file mode 100644 (file)
index 0000000..eaa5e2d
Binary files /dev/null and b/test/fixtures/element.point/point-style-image.png differ