1 files changed, 50 insertions, 0 deletions
diff --git a/web/learn_canvas/bar_canvas.html b/web/learn_canvas/bar_canvas.html
new file mode 100644
index 0000000..c2d7518
--- /dev/null
+++ b/web/learn_canvas/bar_canvas.html
@@ -0,0 +1,50 @@
+<html>
+<head>
+
+<script>
+    function draw() {
+        /* Accepting and seperating comma seperated values */
+        var n = document.getElementById("num").value;
+        var values = n.split(',');
+
+        var canvas = document.getElementById('myCanvas');
+        var ctx = canvas.getContext('2d');
+
+        var width = 40; //bar width
+        var X = 50; // first bar position
+        var base = 200;
+
+        for (var i =0; i<values.length; i++) {
+            ctx.fillStyle = '#008080';
+            var h = values[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);
+
+    }
+    function reset(){
+         var canvas = document.getElementById('myCanvas');
+          var ctx = canvas.getContext('2d');
+           ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+</script>
+</head>
+<body align="center">
+
+
+    Enter the values seperated by a comma<br>
+    <input type="text" name="number" id="num"><br>
+    <input type="button" value="submit" name="submit" onclick="draw()">
+    <input type="button" value="Clear" name="Clear" onclick="reset()"><br><br>
+    <canvas id="myCanvas" width="900" height="500" style="border:1px solid #c3c3c3;">
+    </canvas>
+
+</body>
+</html>