drawFunction.js

function draw(){

        // Accepting and seperating comma seperated values
        var n = document.getElementById("num").value.split(/\s/);
        console.log(n);
         
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var width= 40; // bar width
        var X = 30; // first bar position 
        var base = 200;
        
        // Filling the Rectangle based on the input values
        for (var i =0; i<n.length; i++) {
            ctx.fillStyle = '#008080'; 
            var h = n[i];
            ctx.fillRect(X,canvas.height - h,width,h);
            X +=  width+15;

            // Text to display Bar number
            ctx.fillStyle = '#4da6ff';
            ctx.fillText('Bar '+i,X-50,canvas.height - h -10);
        }
            // Text to display scale 
            ctx.fillStyle = '#000000';
            ctx.fillText('Scale X : '+canvas.width+' Y : '+canvas.height,800,10);
  
    }