Canvas panel - fill color of custom element

Hello to all,

"I have created a Canvas panel and intend to use it as a simple SCADA/HMI application for visualization. The project is inspired by similar wind turbine and solar panel examples.

However, my application is slightly more complex because I collect both real-valued and binary data from a datalogger. The binary signals indicate whether a valve/flap is open or closed, or if a pump is on/off.

I’m not entirely sure how to implement this. I have already set a static image as the canvas background. In previous applications, I would stack two images and toggle their visibility based on the binary signal, but I’m not sure if that approach works in Grafana.
Could you suggest a way to achieve this using the Canvas panel?

I’m open to alternative approaches if this is not possible. One other idea that comes to my mind is to use a rectangle with boundary colored if the flap is open.

Thank you!

Please try this
add item and select rectangle or circle,


Select the element and set the property

backgroup set to your background image set transprant.

then set value mapping

or
you can explore play.grafana examples and canvas dashboard documentation.