Code
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="220" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font="60px"; ctx.strokeText("100",5,20); ctx.strokeText("0",15,190); ctx.moveTo(25,10); ctx.lineTo(25,190); ctx.moveTo(25,190); ctx.lineTo(290,190); ctx.stroke(); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect(40, 90, 25, 100); ctx.fillStyle = "rgb(0,200,0)"; ctx.fillRect(100, 40, 25, 150); ctx.fillStyle = "rgb(200,0,200)"; ctx.fillRect(160, 90, 25, 100); ctx.fillStyle = "rgb(0,200,200)"; ctx.fillRect(220, 40, 25, 150); ctx.strokeStyle='green'; ctx.strokeText("80",220,20); ctx.strokeText("60",40,70); ctx.strokeText("80",100,20); ctx.strokeText("60",160,70); ctx.strokeStyle='blue'; ctx.strokeText("tv",220,210); ctx.strokeText("car",160,210); ctx.strokeText("food",100,210); ctx.strokeText("house",40,210); </script> </body> </html>