From: Dan Vanderkam Date: Sat, 23 Oct 2010 15:39:26 +0000 (-0400) Subject: draw straight lines on half-integer pixels for a crisper look X-Git-Tag: v1.0.0~619 X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=528ce7e597592f227e5334a921cf50e80bbb69af;p=dygraphs.git draw straight lines on half-integer pixels for a crisper look --- diff --git a/dygraph-canvas.js b/dygraph-canvas.js index c6c5b1e..29341e1 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -386,8 +386,11 @@ DygraphCanvasRenderer.isSupported = function(canvasName) { * Draw an X/Y grid on top of the existing plot */ DygraphCanvasRenderer.prototype.render = function() { - // Draw the new X/Y grid + // Draw the new X/Y grid. Lines appear crisper when pixels are rounded to + // half-integers. This prevents them from drawing in two rows/cols. var ctx = this.element.getContext("2d"); + function halfUp(x){return Math.round(x)+0.5}; + function halfDown(y){return Math.round(y)-0.5}; if (this.options.underlayCallback) { this.options.underlayCallback(ctx, this.area, this.layout, this.dygraph_); @@ -401,8 +404,8 @@ DygraphCanvasRenderer.prototype.render = function() { for (var i = 0; i < ticks.length; i++) { // TODO(danvk): allow secondary axes to draw a grid, too. if (ticks[i][0] != 0) continue; - var x = this.area.x; - var y = this.area.y + ticks[i][1] * this.area.h; + var x = halfUp(this.area.x); + var y = halfDown(this.area.y + ticks[i][1] * this.area.h); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + this.area.w, y); @@ -417,8 +420,8 @@ DygraphCanvasRenderer.prototype.render = function() { ctx.strokeStyle = this.options.gridLineColor; ctx.lineWidth = this.options.axisLineWidth; for (var i=0; i