diff --git a/src/core/core.scale.js b/src/core/core.scale.js index dc479d5fb..f741e2e60 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1253,8 +1253,8 @@ export default class Scale extends Element { const height = labelSizes.heights[i]; const width = labelSizes.widths[i]; - let top = y + textOffset - labelPadding.top; - let left = x - labelPadding.left; + let top = textOffset - labelPadding.top; + let left = 0 - labelPadding.left; switch (textBaseline) { case 'middle': @@ -1554,11 +1554,6 @@ export default class Scale extends Element { const tickFont = item.font; const label = item.label; - if (item.backdrop) { - ctx.fillStyle = item.backdrop.color; - ctx.fillRect(item.backdrop.left, item.backdrop.top, item.backdrop.width, item.backdrop.height); - } - let y = item.textOffset; renderText(ctx, label, 0, y, tickFont, item); } diff --git a/src/helpers/helpers.canvas.js b/src/helpers/helpers.canvas.js index 365386549..773398c18 100644 --- a/src/helpers/helpers.canvas.js +++ b/src/helpers/helpers.canvas.js @@ -340,6 +340,10 @@ export function renderText(ctx, text, x, y, font, opts = {}) { for (i = 0; i < lines.length; ++i) { line = lines[i]; + if (opts.backdrop) { + drawBackdrop(ctx, opts.backdrop); + } + if (stroke) { if (opts.strokeColor) { ctx.strokeStyle = opts.strokeColor; @@ -408,6 +412,14 @@ function decorateText(ctx, x, y, line, opts) { } } +function drawBackdrop(ctx, opts) { + const oldColor = ctx.fillStyle; + + ctx.fillStyle = opts.color; + ctx.fillRect(opts.left, opts.top, opts.width, opts.height); + ctx.fillStyle = oldColor; +} + /** * Add a path of a rectangle with rounded corners to the current sub-path * @param {CanvasRenderingContext2D} ctx Context diff --git a/test/fixtures/core.scale/tick-backdrop-rotation.js b/test/fixtures/core.scale/tick-backdrop-rotation.js new file mode 100644 index 000000000..8e2bad7a5 --- /dev/null +++ b/test/fixtures/core.scale/tick-backdrop-rotation.js @@ -0,0 +1,85 @@ +const grid = { + display: false +}; +const title = { + display: false, +}; +module.exports = { + tolerance: 0.0016, + config: { + type: 'line', + options: { + events: [], + scales: { + top: { + type: 'linear', + position: 'top', + ticks: { + display: true, + showLabelBackdrop: true, + minRotation: 45, + backdropColor: 'blue', + backdropPadding: 5, + align: 'start', + crossAlign: 'near', + }, + grid, + title + }, + left: { + type: 'linear', + position: 'left', + ticks: { + display: true, + showLabelBackdrop: true, + minRotation: 90, + backdropColor: 'green', + backdropPadding: { + x: 2, + y: 5 + }, + crossAlign: 'center', + }, + grid, + title + }, + bottom: { + type: 'linear', + position: 'bottom', + ticks: { + display: true, + showLabelBackdrop: true, + backdropColor: 'blue', + backdropPadding: { + x: 5, + y: 5 + }, + align: 'end', + crossAlign: 'far', + minRotation: 60, + }, + grid, + title + }, + right: { + type: 'linear', + position: 'right', + ticks: { + display: true, + showLabelBackdrop: true, + backdropColor: 'gray', + }, + grid, + title + }, + } + } + }, + options: { + canvas: { + height: 256, + width: 256 + }, + spriteText: true, + } +}; diff --git a/test/fixtures/core.scale/tick-backdrop-rotation.png b/test/fixtures/core.scale/tick-backdrop-rotation.png new file mode 100644 index 000000000..4c5d47efa Binary files /dev/null and b/test/fixtures/core.scale/tick-backdrop-rotation.png differ