A needle gauge in CANVAS

by WesleyJohnson

HTML

<canvas id="pump-discharge" width="100" height="100"></canvas>

JavaScript

(function(){
    var c = document.getElementById("pump-discharge");
    var ctx = c.getContext("2d");
    
    var mouseIsDown = false;
    
    var that = this;
    c.addEventListener("mousedown", function(e){
        mouseIsDown = true;
    });
    
    document.getElementsByTagName("body")[0].addEventListener("mouseup", function(e){
        mouseIsDown = false;  
    })
    
    var speed = 0; // Our needle speed
    var centerX = c.width / 2; // Center x of the meter
    var centerY = c.height / 2; // Center y of the meter
    var largeHashCount = 16;  // The spacing of large hashes, 16 per 360 degrees
    var smallHashCount = 80;  // The spacing of small hashes, 80 per 360 degrees
    var outterRadius = 48;    // How far from the center both large and small hashes will start
    var largeHashRadius = 40; // How far from the center large hashes will end
    var smallHashRadius = 45; // How far from the center small hashes will end
            
    // Get the outter points of our large hash lines
    var largeHashesOut = getNPointsOnCircle( centerX, centerY, outterRadius, largeHashCount );
    // Get the inner pints ouf our large hash li
    var largeHashesIn = getNPointsOnCircle( centerX, centerY, largeHashRadius, largeHashCount );
    // The hashes start on the right side of the circle
    // and we need to strip off the bottom 3, so remove 3,4,5
    largeHashesOut.splice(3, 3);
    largeHashesIn.splice(3, 3);
    
    // Get the outter points of our small hashes
    var smallHashesOut = getNPointsOnCircle( centerX, centerY, outterRadius, smallHashCount );
    // Get the inner points out of our small hashes
    var smallHashesIn = getNPointsOnCircle( centerX, centerY, smallHashRadius, smallHashCount);   
    // The hashes start on the right side of the circle
    // and we need to strip off the bottom 20, so remove 10,11,12,13....
    smallHashesOut.splice(10, 20);
    smallHashesIn.splice(10, 20);  
  
    // Get the outter points of our needle, use 160...