search

Mikhus / canvas-gauges

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
http://canvas-gauges.com/
MIT License
1.57k stars 396 forks source link

Draw icon on top of gauge but below the needle? #82

Closed Moulde closed 7 years ago

Moulde commented 8 years ago

Hi I'm trying to recreate a gauge like this. http://www.publicdomainpictures.net/pictures/50000/velka/fuel-gauge.jpg

So i need to draw an icon on the gauge. I tried just getting the canvas context and drawing the icon, and it works, but after updating the value, the gauge is redrawn again, and so the image disappears.

And i am not able to draw the icon below the needle, as it needs to be drawn in the correct order.

Any ideas? Thanks in advance.

Mikhus commented 8 years ago

Hi. Thank you for contribution!

Yes, I have an idea on this - is to provide some events which will make possible to inject into gauge drawing order. Something like:

gauge.beforeDraw('needle', function(canvasContext) {
   // do some custom drawings on a given canvas
});

But this currently is not implemented, will have it as a working idea for further releases.

Moulde commented 8 years ago

That sounds like a great way to implement it.

Mikhus commented 8 years ago

Let's keep it open until implemented :)

Mikhus commented 7 years ago

Implemented in branch 2.1.0

ashokkumarmr1 commented 5 years ago

Where and how do i call guage.before()? I added guage.js inside asset folder