【HTML5】Canvasでスケールを示すカラーバーを作る

数値に従って色分けされた図表などの横についている数値と色の対応を示すカラーバーをCanvas上に作りました。Google Mapなどと組み合わせて使えるかも知れません。

var max_z = 20;
var min_z = -60;
window.onload = function() {
  draw();
};
function draw() {
  var canvas = document.getElementById('color-canvas');
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  /* グラデーション領域をセット */
  var grad  = ctx.createLinearGradient(25,0,300,0);
  /* グラデーション終点のオフセットと色をセット */
  var tempColor
  for (var i = 0; i < 10; i++) {
    tempColor = 200 - 20 * i
    grad.addColorStop(0.1 * i , 'hsl('+ tempColor + ',100%,50%)');
  }
  /* グラデーションをfillStyleプロパティにセット */
  ctx.fillStyle = grad;
  /* 矩形を描画 */
  ctx.rect(25,0, 300,20);
  ctx.fill();
  ctx.textBaseline = 'bottom';
  ctx.font= '20px Times New Roman';
  ctx.fillStyle = 'black';
  ctx.fillText( min_z , 20 , 45, 25 );
  ctx.fillText( max_z , 300 , 45, 25 );
  ctx.font= '20px Times New Roman';
  ctx.fillText( "[m]" , 330 , 45, 20 );
  var data_uri = canvas.toDataURL( "image/png" );
  console.log(data_uri);
  document.getElementById("map-canvas").innerHTML="<img src='"+data_uri+"'>";
}

<canvas id="color-canvas"width="350" height="60"></canvas>
<div id="map-canvas"width="350" height="60"><div>

テストページ⇒カラーバー（横）、カラーバー（縦）。

作成上のポイントは「線形グラデーション」と「HLS色空間」です。

線形グラデーションのサンプルコードのRGB色空間で指定してある部分をHLSに変更することで容易に滑らかに値に対して色を変化させることができました。
具体的には、カラーバーに示したい値の変化にHLS色空間の色相の値の変化を対応させています。
色相の値は一周すると元に戻るので初期値の設定に注意が必要です。