CanvGauge - a gauge using canvas for HTML5

    HTML5 Canvas GaugeGood afternoon, Khabrovites!

    Today I want to share my little development that I did for one of my projects. In fact, the network has many gauge implementations, both paid and free. But I could not find at least one solution using canvas, so I decided to write my own.

    Why exactly canvas?



    Firstly, it works in all modern browsers. Secondly - it still works on the Android and iOS mobile platforms without restrictions. The same SVG, for example, does not work by default on Android 2.x, and Flash does not work on iOS.

    CanvGauge code can be picked up here . There you can find a small description of the API . And here to see an example of work .

    When using you do not need any third-party libraries. The code is distributed under the MIT license, you can safely pick up, modify, improve / degrade, share your additions and best practices. I will gladly accept good commits to my repository. I would be grateful for the bugs and interesting suggestions. Unfortunately, I'm not an artist, so the look may not be perfect. If someone can help with the guidance of "beauty" - welcome!

    Out of the box features



    Gauge is relatively easy to customize. You can set parametrically the colors of the elements of the device, its size, gradation scales, title and units. Various arrow animation functions are available, and it is also possible to implement your own animation function on the fly.

    Also popular now: