Enable opacity option to the labels when the content is an image or canvas

docs/guide/types/_commonInnerLabel.md

@@ -12,6 +12,7 @@ All of these options can be [Scriptable](../options.md#scriptable-options)
 | `drawTime` | `string` | `options.drawTime` | See [drawTime](../options.md#draw-time). Defaults to the annotation draw time if unset
 | `font` | [`Font`](../options.md#font) | `{ weight: 'bold' }` | Label font
 | `height` | `number`\|`string` | `undefined` | Overrides the height of the image or canvas element. Could be set in pixel by a number, or in percentage of current height of image or canvas element by a string. If undefined, uses the height of the image or canvas element. It is used only when the content is an image or canvas element.
+| `opacity` | `number` | `undefined` | Overrides the opacity of the image or canvas element. Could be set a number in the range 0.0 to 1.0, inclusive. If undefined, uses the opacity of the image or canvas element. It is used only when the content is an image or canvas element.
 | `padding` | [`Padding`](../options.md#padding) | `6` | The padding to add around the text label.
 | [`position`](#position) | `string`\|`{x: string, y: string}` | `'center'` | Anchor position of label in the annotation.
 | `rotation` | `number` | `undefined` | Rotation of label, in degrees. If `undefined`, the annotation rotation is used.

docs/guide/types/label.md

@@ -64,6 +64,7 @@ The following options are available for label annotations.
 | [`content`](#general) | `string`\|`string[]`\|[`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)\|[`HTMLCanvasElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) | Yes | `null`
 | [`font`](#styling) | [`Font`](../options.md#font) | Yes | `{}`
 | [`height`](#general) | `number`\|`string` | Yes | `undefined`
+| [`opacity`](#styling) | `number` | Yes | `undefined`
 | [`padding`](#general) | [`Padding`](../options.md#padding) | Yes | `6`
 | [`position`](#position) | `string`\|`{x: string, y: string}` | Yes | `'center'`
 | [`rotation`](#general) | `number`| Yes | `0`
@@ -123,6 +124,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
 | `borderWidth` | Stroke width (in pixels).
 | `color` | Text color.
 | `font` | Text font.
+| `opacity` | Overrides the opacity of the image or canvas element. Could be set a number in the range 0.0 to 1.0, inclusive. If undefined, uses the opacity of the image or canvas element. It is used only when the content is an image or canvas element.
 | `shadowBlur` | The amount of blur applied to shadow of the box where the label is located. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur).
 | `shadowOffsetX` | The distance that shadow, of the box where the label is located, will be offset horizontally. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX).
 | `shadowOffsetY` | The distance that shadow, of the box where the label is located, will be offset vertically. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY).

docs/guide/types/line.md

@@ -137,6 +137,7 @@ All of these options can be [Scriptable](../options.md#scriptable-options)
 | `drawTime` | `string` | `options.drawTime` | See [drawTime](../options.md#draw-time). Defaults to the line annotation draw time if unset.
 | `font` | [`Font`](../options.md#font) | `{ weight: 'bold' }` | Label font.
 | `height` | `number`\|`string` | `undefined` | Overrides the height of the image or canvas element. Could be set in pixel by a number, or in percentage of current height of image or canvas element by a string. If undefined, uses the height of the image or canvas element. It is used only when the content is an image or canvas element.
+| `opacity` | `number` | `undefined` | Overrides the opacity of the image or canvas element. Could be set a number in the range 0.0 to 1.0, inclusive. If undefined, uses the opacity of the image or canvas element. It is used only when the content is an image or canvas element.
 | `padding` | [`Padding`](../options.md#padding) | `6` | The padding to add around the text label.
 | `position` | `string` | `'center'` | Anchor position of label on line. Possible options are: `'start'`, `'center'`, `'end'`. It can be set by a string in percentage format `'number%'` which are representing the percentage on the width of the line where the label will be located.
 | `rotation` | `number`\|`'auto'` | `0` | Rotation of label, in degrees, or 'auto' to use the degrees of the line.

src/helpers/helpers.canvas.js

@@ -1,5 +1,5 @@
-import {addRoundedRectPath, isArray, toFont, toTRBLCorners, toRadians} from 'chart.js/helpers';
-import {clampAll} from './helpers.core';
+import {addRoundedRectPath, isArray, isNumber, toFont, toTRBLCorners, toRadians} from 'chart.js/helpers';
+import {clampAll, clamp} from './helpers.core';
 import {calculateTextAlignment, getSize} from './helpers.options';
 
 const widthCache = new Map();
@@ -130,7 +130,10 @@ export function drawBox(ctx, rect, options) {
 export function drawLabel(ctx, rect, options) {
   const content = options.content;
   if (isImageOrCanvas(content)) {
+    ctx.save();
+    ctx.globalAlpha = getOpacity(options.opacity, content.style.opacity);
     ctx.drawImage(content, rect.x, rect.y, rect.width, rect.height);
+    ctx.restore();
     return;
   }
   const labels = isArray(content) ? content : [content];
@@ -160,3 +163,8 @@ function setTextStrokeStyle(ctx, options) {
     return true;
   }
 }
+
+function getOpacity(value, elementValue) {
+  const opacity = isNumber(value) ? value : elementValue;
+  return isNumber(opacity) ? clamp(opacity, 0, 1) : 1;
+}

src/types/box.js

@@ -60,6 +60,7 @@ BoxAnnotation.defaults = {
       weight: 'bold'
     },
     height: undefined,
+    opacity: undefined,
     padding: 6,
     position: 'center',
     rotation: undefined,

src/types/label.js

@@ -86,6 +86,7 @@ LabelAnnotation.defaults = {
     weight: undefined
   },
   height: undefined,
+  opacity: undefined,
   padding: 6,
   position: 'center',
   rotation: 0,

src/types/line.js

@@ -164,6 +164,7 @@ LineAnnotation.defaults = {
       weight: 'bold'
     },
     height: undefined,
+    opacity: undefined,
     padding: 6,
     position: 'center',
     rotation: 0,

test/fixtures/box/labelCanvasOpacity.js

@@ -0,0 +1,107 @@
+const canvas = window.createCanvas();
+canvas.style.opacity = 0.2;
+
+module.exports = {
+  tolerance: 0.0060,
+  config: {
+    type: 'scatter',
+    options: {
+      scales: {
+        x: {
+          display: true,
+          min: -10,
+          max: 10
+        },
+        y: {
+          display: true,
+          min: -10,
+          max: 10
+        }
+      },
+      plugins: {
+        legend: false,
+        annotation: {
+          annotations: {
+            canvas1: {
+              type: 'box',
+              xMin: -9,
+              xMax: -1,
+              yMin: 9,
+              yMax: 1,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 2,
+              label: {
+                display: true,
+                position: 'start',
+                content: canvas,
+                width: '25%',
+                height: '25%'
+              }
+            },
+            canvas2: {
+              type: 'box',
+              xMin: 1,
+              xMax: 9,
+              yMin: 9,
+              yMax: 1,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 2,
+              label: {
+                display: true,
+                position: 'end',
+                content: canvas,
+                opacity: 0.5,
+                width: '25%',
+                height: '25%'
+              }
+            },
+            canvas3: {
+              type: 'box',
+              xMin: -9,
+              xMax: -1,
+              yMin: -1,
+              yMax: -9,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 2,
+              label: {
+                display: true,
+                position: {
+                  x: 'start',
+                  y: 'center'
+                },
+                content: window.createCanvas,
+                opacity: 0.2,
+                width: '25%',
+                height: '25%'
+              }
+            },
+            canvas4: {
+              type: 'box',
+              xMin: 1,
+              xMax: 9,
+              yMin: -1,
+              yMax: -9,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 2,
+              label: {
+                display: true,
+                position: {
+                  x: 'center',
+                  y: 'end'
+                },
+                content: window.createCanvas,
+                opacity: 'mistake',
+                width: '25%',
+                height: '25%'
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};

test/fixtures/ellipse/labelCanvasOpacity.js

@@ -0,0 +1,107 @@
+const canvas = window.createCanvas();
+canvas.style.opacity = 0.2;
+
+module.exports = {
+  tolerance: 0.0060,
+  config: {
+    type: 'scatter',
+    options: {
+      scales: {
+        x: {
+          display: true,
+          min: -10,
+          max: 10
+        },
+        y: {
+          display: true,
+          min: -10,
+          max: 10
+        }
+      },
+      plugins: {
+        legend: false,
+        annotation: {
+          annotations: {
+            canvas1: {
+              type: 'ellipse',
+              xMin: -9,
+              xMax: -1,
+              yMin: 9,
+              yMax: 1,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 2,
+              label: {
+                display: true,
+                position: 'start',
+                content: canvas,
+                width: '25%',
+                height: '25%'
+              }
+            },
+            canvas2: {
+              type: 'ellipse',
+              xMin: 1,
+              xMax: 9,
+              yMin: 9,
+              yMax: 1,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 2,
+              label: {
+                display: true,
+                position: 'end',
+                content: canvas,
+                opacity: 0.5,
+                width: '25%',
+                height: '25%'
+              }
+            },
+            canvas3: {
+              type: 'ellipse',
+              xMin: -9,
+              xMax: -1,
+              yMin: -1,
+              yMax: -9,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 2,
+              label: {
+                display: true,
+                position: {
+                  x: 'start',
+                  y: 'center'
+                },
+                content: window.createCanvas,
+                opacity: 0.2,
+                width: '25%',
+                height: '25%'
+              }
+            },
+            canvas4: {
+              type: 'ellipse',
+              xMin: 1,
+              xMax: 9,
+              yMin: -1,
+              yMax: -9,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 2,
+              label: {
+                display: true,
+                position: {
+                  x: 'center',
+                  y: 'end'
+                },
+                content: window.createCanvas,
+                opacity: 'mistake',
+                width: '25%',
+                height: '25%'
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};

test/fixtures/label/canvasOpacity.js

@@ -0,0 +1,52 @@
+const canvas = window.createCanvas();
+canvas.style.opacity = 0.2;
+module.exports = {
+  config: {
+    type: 'scatter',
+    options: {
+      scales: {
+        x: {
+          display: false,
+          min: -10,
+          max: 10
+        },
+        y: {
+          display: false,
+          min: -10,
+          max: 10
+        }
+      },
+      plugins: {
+        legend: false,
+        annotation: {
+          annotations: {
+            canvas: {
+              type: 'label',
+              xValue: 0,
+              yValue: 0,
+              content: canvas
+            },
+            canvasSmall: {
+              type: 'label',
+              xValue: -6,
+              yValue: 6,
+              content: canvas,
+              width: 100,
+              height: () => 100 * canvas.height / canvas.width,
+              opacity: 0.6,
+            },
+            canvasPerc: {
+              type: 'label',
+              xValue: 6,
+              yValue: -6,
+              content: canvas,
+              opacity: 'mistake',
+              width: '50%',
+              height: '50%',
+            }
+          }
+        }
+      }
+    }
+  }
+};