From f1a0a8882e1b7e2d2527a7c57188e6132a30eb20 Mon Sep 17 00:00:00 2001
From: Drew Noakes <git@drewnoakes.com>
Date: Sat, 23 Feb 2013 12:21:21 +0000
Subject: [PATCH] Added support for sharp grid lines.

The HTML5 canvas uses sub-pixel rendering, meaning that 1px wide lines often end up being blurred across two physical pixels. Considering a vertical line, its 'x' position specifies the center of the line. Therefore it spans +/-0.5 pixels from that point. Bam. Blurriness.

The solution is to subtract (adding would also work) 0.5 to the calculated x/y positions for vertical/horizontal lines respectively.

This patch does not change the default behaviour.

This problem is visible before this patch too, where the topmost and bottommost lines are 1px thick, while others are 2px thick.
---
 smoothie.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/smoothie.js b/smoothie.js
index a71060b..08d363e 100644
--- a/smoothie.js
+++ b/smoothie.js
@@ -78,7 +78,7 @@ TimeSeries.prototype.append = function(timestamp, value) {
 function SmoothieChart(options) {
   // Defaults
   options = options || {};
-  options.grid = options.grid || { fillStyle:'#000000', strokeStyle: '#777777', lineWidth: 1, millisPerLine: 1000, verticalSections: 2 };
+  options.grid = options.grid || { fillStyle:'#000000', strokeStyle: '#777777', lineWidth: 1, sharpLines: false, millisPerLine: 1000, verticalSections: 2 };
   options.millisPerPixel = options.millisPerPixel || 20;
   options.maxValueScale = options.maxValueScale || 1;
   // NOTE there are no default values for 'minValue' and 'maxValue'
@@ -207,6 +207,8 @@ SmoothieChart.prototype.render = function(canvas, time) {
     for (var t = time - (time % options.grid.millisPerLine); t >= time - (dimensions.width * options.millisPerPixel); t -= options.grid.millisPerLine) {
       canvasContext.beginPath();
       var gx = Math.round(dimensions.width - ((time - t) / options.millisPerPixel));
+      if (options.grid.sharpLines)
+        gx -= 0.5;
       canvasContext.moveTo(gx, 0);
       canvasContext.lineTo(gx, dimensions.height);
       canvasContext.stroke();
@@ -231,6 +233,8 @@ SmoothieChart.prototype.render = function(canvas, time) {
   // Horizontal (value) dividers.
   for (var v = 1; v < options.grid.verticalSections; v++) {
     var gy = Math.round(v * dimensions.height / options.grid.verticalSections);
+    if (options.grid.sharpLines)
+      gy -= 0.5;
     canvasContext.beginPath();
     canvasContext.moveTo(0, gy);
     canvasContext.lineTo(dimensions.width, gy);