From 8e8d09e8258111258abdf986fbf13d1dfcdfab7e Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange@themasta.com>
Date: Sat, 11 Feb 2017 18:36:12 -0500
Subject: [PATCH] Make bezier canvases HiDPI-aware. (#47)

* Make bezier canvases HiDPI-aware.

* Fix HiDPI bugs and linting issues.

* Address review comments.
---
 components/Graphic.jsx | 38 +++++++++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/components/Graphic.jsx b/components/Graphic.jsx
index 06af4b53..5349e0fa 100644
--- a/components/Graphic.jsx
+++ b/components/Graphic.jsx
@@ -16,6 +16,7 @@ var Graphic = React.createClass({
 
   defaultWidth: 275,
   defaultHeight: 275,
+  panelCount: 1,
 
   Bezier: Bezier,
   utils: Bezier.getUtils(),
@@ -53,6 +54,10 @@ var Graphic = React.createClass({
       <figure className={this.props.inline ? "inline": false}>
         <canvas ref="canvas"
                 tabIndex="0"
+                style={{
+                  width: this.panelCount * this.defaultWidth + "px",
+                  height: this.defaultHeight + "px"
+                }}
                 onMouseDown={this.mouseDown}
                 onMouseMove={this.mouseMove}
                 onMouseUp={this.mouseUp}
@@ -68,11 +73,13 @@ var Graphic = React.createClass({
 
   componentDidMount: function() {
     var cvs = this.refs.canvas;
-    cvs.width = this.defaultWidth;
-    cvs.height = this.defaultHeight;
+    var dpr = this.getPixelRatio();
+    cvs.width = this.defaultWidth * dpr;
+    cvs.height = this.defaultHeight * dpr;
     this.cvs = cvs;
     var ctx = cvs.getContext("2d");
     this.ctx = ctx;
+    this.ctx.scale(dpr, dpr);
 
     if (this.props.paperjs) {
       var Paper = this.Paper = require("../lib/vendor/paperjs/paper-core");
@@ -238,6 +245,8 @@ var Graphic = React.createClass({
     this.ctx.strokeStyle = "black";
     this.ctx.lineWidth = 1;
     this.ctx.fillStyle = "none";
+    var dpr = this.getPixelRatio();
+    this.ctx.scale(dpr, dpr);
     this.offset = {x:0, y:0};
     this.colorSeed = 0;
   },
@@ -245,8 +254,15 @@ var Graphic = React.createClass({
   setSize: function(w,h) {
     this.defaultWidth = w;
     this.defaultHeight = h;
-    this.refs.canvas.width = w;
-    this.refs.canvas.height = h;
+
+    var cvs = this.refs.canvas;
+    cvs.style.width = this.panelCount * w + "px";
+    cvs.style.height = h + "px";
+
+    var dpr = this.getPixelRatio();
+    cvs.width = this.panelCount * w * dpr;
+    cvs.height = h * dpr;
+    this.ctx.scale(dpr, dpr);
   },
 
   setCurves: function(c) {
@@ -279,16 +295,23 @@ var Graphic = React.createClass({
     return new this.Bezier(120,160,35,200,220,260,220,40);
   },
 
+  getPixelRatio: function () {
+    return window.devicePixelRatio || 1;
+  },
+
   toImage: function() {
     var dataURL = this.refs.canvas.toDataURL();
     var img = new Image();
     img.src = dataURL;
+    img.devicePixelRatio = this.getPixelRatio();
     return img;
   },
 
   setPanelCount: function(c) {
+    this.panelCount = c;
     var cvs = this.refs.canvas;
-    cvs.width = c * this.defaultWidth;
+    cvs.width = c * this.defaultWidth * this.getPixelRatio();
+    cvs.style.width = c * this.defaultWidth + "px";
   },
 
   setOffset: function(f) {
@@ -602,12 +625,13 @@ var Graphic = React.createClass({
       offset.x += this.offset.x;
       offset.y += this.offset.y;
     }
+    var dpr = image.devicePixelRatio || 1;
     if (image.loaded) {
-      this.ctx.drawImage(image,offset.x,offset.y);
+      this.ctx.drawImage(image,offset.x,offset.y, image.width/dpr, image.height/dpr);
     } else {
       image.onload = () => {
         image.loaded = true;
-        this.ctx.drawImage(image,offset.x,offset.y);
+        this.ctx.drawImage(image,offset.x,offset.y, image.width/dpr, image.height/dpr);
       };
     }
   },