title: xScale and yScale in Canvas
body: <p>I have a question regarding to the xScale and yScale when drawing a column chart with Canvas, here is the code:</p>
  
  <pre><code> &lt;html&gt;
   &lt;head&gt;
  &lt;title&gt;Bar Graph&lt;/title&gt;
  &lt;style&gt;#canvas{background: #ffffff;
      box-shadow:5px 5px 5px #ccc;
      border:5px solid #eee;
      margin-bottom:10px;}&lt;/style&gt;    
  &lt;script type="text/javascript"&gt;
  
  var canvas ;
  var context ;
  var Val_Max;
  var Val_Min;
  var sections;
  var xScale;
  var yScale;
  var y;
      // values of each item on the graph
  var itemName = [ "Red", "Blue", "Green"];
  var itemValue = [ 12144,12179, 12144 ];
  
  function init() {
      // intialize values for each variables
  sections = 3;
  Val_Max = 13000;
  var stepSize = 1000;
  var columnSize = 50;
  var rowSize = 60;
  var margin = 10;
  var header = "Counts" 
      //
  
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  context.fillStyle = "#000000;"
  
  yScale = (canvas.height - columnSize - margin)/ 13000 ;
  xScale = (canvas.width - rowSize) / (sections+1);
  
  context.strokeStyle="#000;"; // background black lines
  context.beginPath();
      // column names 
  context.font = "19 pt Arial;"
  context.fillText(header, 0, columnSize-margin*2);
      // draw lines in the background
  context.font = "16 pt Helvetica"
  var count =  0;
  for (scale=Val_Max;scale&gt;=0;scale = scale - stepSize) {
      y = columnSize + (yScale * count * stepSize); 
      context.fillText(scale, margin, y);
      context.moveTo(rowSize,y)
      context.lineTo(canvas.width,y)
      count++;
  }
  context.stroke();
  
      // print names of each data entry
  context.font = "20 pt Verdana";
  context.textBaseline="bottom";
  
  function computeHeight(value) {
  y = canvas.height - value * yScale ;    
  }
  
  for (i=0;i&lt;4;i++) {
      computeHeight(itemValue[i]);
      context.fillText(itemName[i], xScale * (i+1), y-margin) ;
  }
  
      // shadow for graph's bar lines with color and offset
  
  context.fillStyle="#9933FF;";
   context.shadowColor = 'rgba(128,128,128, 0.5)';
  
  //shadow offset along X and Y direction 
  context.shadowOffsetX = 9;
  context.shadowOffsetY = 3;
  
  // translate to bottom of graph  in order to match the data 
  context.translate(0,canvas.height - margin);
  context.scale(xScale, -1*yScale);
  
      // draw each graph bars 
  for (i=0;i&lt;4;i++) {
      context.fillRect(i+1, 0, 0.3, itemValue[i]);
  }
  
  
  
  }
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onLoad="init()"&gt;
  &lt;div&gt;
  &lt;h2&gt;Pixel Value by colour&lt;/h2&gt;
  
  &lt;canvas id="canvas" height="400" width="650"&gt;
  &lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;  
  </code></pre>
  
  <p>I am not sure what do the xScale and yScale mean in the column chart, I tried to play them to make some change to see what the graph look like, but still did not get the mean, please advice, thank you.</p>