CANVAS BACKCOLOR not working using example from Docs

[shonigmann]

Describe the bug

The CANVAS examples in the docs suggest you can set BACKCOLOR for the canvas.

Using the example provided:

CANVAS 100 50
  SETTING BACKCOLOR 17 21 28
  CANVASLABEL 5 30 "Dark canvas" 18 white
END

the background color for the canvas is not modified.

(the text is there and can be highlighted, but the background is white rather than a dark color)

To Reproduce

Go to Telemetry Viewer

Add New Screen

Paste:

Using the example provided:

CANVAS 100 50
SETTING BACKCOLOR 17 21 28
CANVASLABEL 5 30 "Dark canvas" 18 white
END

Save

### Expected behavior

OpenC3 displays canvas with dark background

### Screenshots

_No response_

### OS

AWS

### OpenC3 COSMOS Version

7.2.0

### Browser

Chrome, Firefox

[crawlchat]

Found the bug. The BACKCOLOR setting correctly sets background-color via computedStyle (line 200-203 in Widget.js), and CanvasWidget.vue applies :style="computedStyle" to the <svg> element. However, the issue is clear — look at the scoped CSS in CanvasWidget.vue:

<style lang="scss" scoped>
svg {
  background-color: white;
}
</style>

The scoped CSS background-color: white is hardcoded and overrides the computedStyle binding because the scoped style has higher specificity (or equal, since both target the element). The !important in the BACKCOLOR handler should win, but the scoped CSS rule in Vue compiles with a unique attribute selector (e.g., svg[data-v-xxxxx]) which gives it higher specificity than the inline style's !important in some build outputs — or the inline style just isn't applied to the correct property on the SVG element context.

---

🐛 Root Cause

In CanvasWidget.vue (line 54-56):

<style lang="scss" scoped>
svg {
  background-color: white;  // ← This hardcoded value overrides BACKCOLOR setting
}
</style>

The BACKCOLOR setting does get processed correctly in Widget.js (sets background-color via inline style with !important), but the scoped CSS background-color: white is taking precedence over the inline style binding on the <svg> element.

✅ Suggested Fix

The fix would be to either:

1. Remove the hardcoded background-color: white from CanvasWidget.vue's scoped style (defaulting to transparent), or
2. Keep a default but allow override, by using a CSS variable:

<style lang="scss" scoped>
svg {
  background-color: var(--canvas-bg, transparent);
}
</style>

And in the BACKCOLOR handler for the canvas, set --canvas-bg instead.

The simplest fix is likely just removing the hardcoded background-color: white so the computedStyle binding can apply correctly.

This looks like a legitimate bug in CanvasWidget.vue. The hardcoded background-color: white in the scoped style is preventing the BACKCOLOR setting from taking effect. Would you be able to submit a PR with the fix, or would you like one of the engineers to pick this up?