JSFiddle - React, Tailwind, and code Playground

by danzkusuma

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<div id="container"></div>

CSS

body {
    padding:20px;
}
#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:350px;
    height:350px;
}

JavaScript

var start = 0;
var seq   = 10;
var value = 40;
var end   = seq * 8;

if(value > end){
    value = end;
}

var stage = new Kinetic.Stage({
    container: 'container',
    width: 350,
    height: 650
});

var layer = new Kinetic.Layer();
stage.add(layer);

var linearGauge = new Kinetic.Group({
    x: 20,
    y: 20,
    width: 70,
    height: 625,
    draggable: true
});
layer.add(linearGauge); 

var rulerBG = new Kinetic.Rect({
    x: 5,
    y: 0,
    width: 70,
    height: 440,
    fillLinearGradientStartPoint: [107, 0],
    fillLinearGradientEndPoint: [107, 70],
    fillLinearGradientColorStops: [0, 'white', .45, "rgb(225,227,229)", 1, "rgb(225,227,229)"],
    stroke: "rgba(50,50,50,1)",
    strokeWidth: 1
});
linearGauge.add(rulerBG);

var bgGauge = new Kinetic.Rect({
    x: 20,
    y: 16,
    width: 25,
    height: 400,
    fill: "rgba(204,234,246,.7)"
});
linearGauge.add(bgGauge);

var barGauge = new Kinetic.Rect({
    x: 20,
    y: (440 - 24) - ((value - start) / seq) * 50,
    width: 25,
    height: ((value - start) / seq) * 50,
    fill: "#00FF00",
    stroke: "rgba(204,234,246,0.8)",
    strokeWidth: .5
});
linearGauge.add(barGauge);

var tickMarks = new Kinetic.Shape({
    x: 10,
    y: 5,
    drawFunc: function (context) {
        context.beginPath();
        var valvalue = end;
        for (var i = 0; i < 8; i++) {
            context.moveTo(10, 10 + i * 50);
            context.lineTo(40, 10 + i * 50);
            context.fillText(valvalue, 50, 10 + i * 50 + 2);
            for (var j = 0; j < 5; j++) {
                context.moveTo(25, 10 + i * 50 + j * 10);
                context.lineTo(35, 10 + i * 50 + j * 10);
            }
            valvalue = valvalue - seq;
        }
        context.moveTo(10, (8 * 50) + 10);
        context.lineTo(40, (8 * 50) + 10);
        context.fillText(start, 50, (8 * 50) + 11);

        context.fillStrokeShape(this);
    },
    stroke: '#555555',
    strokeWidth: 2
});
linearGauge.add(tickMarks);

layer.draw();