diff --git a/src/helpers/helpers.canvas.js b/src/helpers/helpers.canvas.js index b23c2ff8213..00950f5621f 100644 --- 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 index 00000000000..7ed2d97ef5c --- /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 index 00000000000..eaa5e2d7c87 Binary files /dev/null and b/test/fixtures/element.point/point-style-image.png differ