From 2a905cb070bb842ffeead38140d3aab7bc7384a9 Mon Sep 17 00:00:00 2001
From: Michael Kuhn <michael.kuhn@informatik.uni-hamburg.de>
Date: Mon, 20 Nov 2017 18:38:24 +0100
Subject: [PATCH] Automatically scale canvas for HiDPI screens

The graph is blurry on HiDPI screens. Scale the canvas to make up for
it. See https://www.html5rocks.com/en/tutorials/canvas/hidpi/.
---
 gitgraph.js | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/gitgraph.js b/gitgraph.js
index e2f0026..6447d5c 100644
--- a/gitgraph.js
+++ b/gitgraph.js
@@ -43,6 +43,15 @@ var gitGraph = function (canvas, rawGraphList, config) {
 	
 	var ctx = canvas.getContext("2d");
 	
+	var devicePixelRatio = window.devicePixelRatio || 1;
+	var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
+	                        ctx.mozBackingStorePixelRatio ||
+	                        ctx.msBackingStorePixelRatio ||
+	                        ctx.oBackingStorePixelRatio ||
+	                        ctx.backingStorePixelRatio || 1;
+
+	var ratio = devicePixelRatio / backingStoreRatio;
+
 	var init = function () {
 		var maxWidth = 0;
 		var i;
@@ -60,12 +69,20 @@ var gitGraph = function (canvas, rawGraphList, config) {
 			graphList.unshift(row);
 		}
 		
-		canvas.width = maxWidth * config.unitSize;
-		canvas.height = graphList.length * config.unitSize;
+		var width = maxWidth * config.unitSize;
+		var height = graphList.length * config.unitSize;
+
+		canvas.width = width * ratio;
+		canvas.height = height * ratio;
+
+		canvas.style.width = width + 'px';
+		canvas.style.height = height + 'px';
 		
 		ctx.lineWidth = config.lineWidth;
 		ctx.lineJoin = "round";
 		ctx.lineCap = "round";
+
+		ctx.scale(ratio, ratio);
 	};
 	
 	var genRandomStr = function () {
@@ -185,7 +202,7 @@ var gitGraph = function (canvas, rawGraphList, config) {
 			}
 		}
 		
-		y = canvas.height - config.unitSize * 0.5;
+		y = (canvas.height / ratio) - config.unitSize * 0.5;
 		
 		//iterate
 		for (i = 0, l = graphList.length; i < l; i++) {