Simple html5 canvas bar chart

HTML

<!-- include in your body -->
    <canvas id="bar_cart" width="800" height="350"></canvas>
    <div id="cart_data">
      <h1>Top-Selling Car Manufacturers in Germany in 2010</h1> 
      <ul>
        <li>
          <p data-name="Volkswagen" data-value="613808" data-unit="Sales" data-color="#ff0000">Volkswagen - 613808 Sales</p>
        </li>
        <li>
          <p data-name="Mercedes" data-value="281240" data-unit="Sales" data-color="#ffff00">Mercedes - 281240 Sales</p>
        </li>
        <li> 
          <p data-name="BMW/Mini" data-value="266729" data-unit="Sales" data-color="#00ff00">BMW/Mini - 266729 Sales</p>
        </li>
        <li>
          <p data-name="Opel" data-value="233498" data-unit="Sales" data-color="#00ffff">Opel - 233498 Sales</p>
        </li>
        <li>
          <p data-name="Audi" data-value="226872" data-unit="Sales" data-color="#0080ff">Audi - 226872 Sales</p>
        </li>
        <li>
          <p data-name="Ford" data-value="198156" data-unit="Sales" data-color="#8000ff">Ford - 198156 Sales</p>
        </li>
      </ul> 
    </div>

JavaScript

var drawBarCart = function() {
/* options (fold) */
var textColor = "rgb(0,0,0)";
/* options (end) */

/* get some data from html (fold) */
var height;
var width;
 $("canvas").each(function(i){  
  width = $(this).attr("width");
  height = $(this).attr("height");
 });
var title = $('#cart_data h1').text();
var values = $("#cart_data>ul>li>p[data-value]").map(function(){ 
   return parseInt($(this).attr("data-value"));
});
/* get some data from html (end) */

/* drawing values (fold) */
var yMargin = 25; //margin on top and bottom
var xMargin = 10; //margin left and right and beetween bars
var barMaxHeight = height - yMargin * 2; //maximum bar height depending on canvas height
var barWidth = (width - (values.length + 2) * xMargin) / values.length; //width of bar depending on canvas width
var yBarStartPoint = height - yMargin; //position where the bars start
var yLabelStartPoint = yBarStartPoint + 5; //middle of each bar for

if (barWidth < 100){
    headLineFont = '14px sans-serif'
    labelFont = '12px sans-serif';
    barLabelFont = '10px sans-serif'
} else {
    headLineFont = '18px sans-serif'
    labelFont = '14px sans-serif';
    barLabelFont = '12px sans-serif'
};
/* drawing values (end) */

/* calculate some intermediary values (fold) */
var xMiddleOfDiagram = (xMargin + xMargin * values.length + barWidth * values.length)/2
var biggestValue = values.sort()[values.length-1];
/* calculate some intermediary values (end) */

var context = canvas.getContext('2d');
    	
    /* draw headline (fold) */
    context.fillStyle = textColor;
    context.font = headLineFont; context.textBaseline = 'top'; context.textAlign = 'center'; context.fillText(title, xMiddleOfDiagram, 0);
    /*  draw headline (end) */
    
	/* add shadow for chart and labels (fold) */
	context.shadowOffsetX = 3;
    context.shadowOffsetY = 3;
    context.shadowBlur = 10;
	context.shadowColor = "rgba(64, 64, 64, 0.5)";
	/* add shadow for chart and labels (end) */
	
    /* iterate over values...