Fix #10749 - backdrops with rotated labels (#10759)

* Fix #10749 - backdrops with rotated labels

* remove translation adjustment
Because backdrop now occurs after translation, we don't want to double-adjust the position.

* increase tolerance slightly due to anti-aliasing

Co-authored-by: Charles McNulty <charles.mcnulty@tasconline.com>

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 top = textOffset - labelPadding.top;
-        let left = x - labelPadding.left;
+        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);
     }

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

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,
+  }
+};