feat(canvas): add support for HiDPI screens

plouc · Aug 29, 2017 · 26ebb9b · 26ebb9b
1 parent 41886c1
commit 26ebb9b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 11 deletions.
diff --git a/src/components/charts/bar/BarCanvas.js b/src/components/charts/bar/BarCanvas.js
@@ -48,6 +48,7 @@ class BarCanvas extends Component {
             height,
             outerWidth,
             outerHeight,
+            pixelRatio,
             margin,
 
             // layout
@@ -65,8 +66,10 @@ class BarCanvas extends Component {
             getColor,
         } = props
 
-        this.surface.width = outerWidth
-        this.surface.height = outerHeight
+        this.surface.width = outerWidth * pixelRatio
+        this.surface.height = outerHeight * pixelRatio
+
+        this.ctx.scale(pixelRatio, pixelRatio)
 
         let result
         if (groupMode === 'grouped') {
@@ -132,7 +135,7 @@ class BarCanvas extends Component {
     }
 
     render() {
-        const { outerWidth, outerHeight, isInteractive, theme } = this.props
+        const { outerWidth, outerHeight, pixelRatio, isInteractive, theme } = this.props
 
         return (
             <Container isInteractive={isInteractive} theme={theme}>
@@ -141,8 +144,12 @@ class BarCanvas extends Component {
                         ref={surface => {
                             this.surface = surface
                         }}
-                        width={outerWidth}
-                        height={outerHeight}
+                        width={outerWidth * pixelRatio}
+                        height={outerHeight * pixelRatio}
+                        style={{
+                            width: outerWidth,
+                            height: outerHeight,
+                        }}
                         onMouseEnter={partial(this.handleMouseHover, showTooltip, hideTooltip)}
                         onMouseMove={partial(this.handleMouseHover, showTooltip, hideTooltip)}
                         onMouseLeave={partial(this.handleMouseLeave, hideTooltip)}

diff --git a/src/components/charts/bar/props.js b/src/components/charts/bar/props.js
@@ -43,6 +43,9 @@ export const BarPropTypes = {
 
     // interactivity
     isInteractive: PropTypes.bool,
+
+    // canvas specific
+    pixelRatio: PropTypes.number.isRequired,
 }
 
 export const BarDefaultProps = {
@@ -67,4 +70,7 @@ export const BarDefaultProps = {
 
     // interactivity
     isInteractive: true,
+
+    // canvas specific
+    pixelRatio: window && window.devicePixelRatio ? window.devicePixelRatio : 1,
 }
diff --git a/src/components/charts/heatmap/HeatMapCanvas.js b/src/components/charts/heatmap/HeatMapCanvas.js
@@ -43,6 +43,7 @@ class HeatMapCanvas extends Component {
             height,
             outerWidth,
             outerHeight,
+            pixelRatio,
             margin,
             offsetX,
             offsetY,
@@ -53,8 +54,10 @@ class HeatMapCanvas extends Component {
             cellShape,
         } = props
 
-        this.surface.width = outerWidth
-        this.surface.height = outerHeight
+        this.surface.width = outerWidth * pixelRatio
+        this.surface.height = outerHeight * pixelRatio
+
+        this.ctx.scale(pixelRatio, pixelRatio)
 
         let renderNode
         if (cellShape === 'rect') {
@@ -125,7 +128,7 @@ class HeatMapCanvas extends Component {
     }
 
     render() {
-        const { outerWidth, outerHeight, isInteractive, theme } = this.props
+        const { outerWidth, outerHeight, pixelRatio, isInteractive, theme } = this.props
 
         return (
             <Container isInteractive={isInteractive} theme={theme}>
@@ -134,8 +137,12 @@ class HeatMapCanvas extends Component {
                         ref={surface => {
                             this.surface = surface
                         }}
-                        width={outerWidth}
-                        height={outerHeight}
+                        width={outerWidth * pixelRatio}
+                        height={outerHeight * pixelRatio}
+                        style={{
+                            width: outerWidth,
+                            height: outerHeight,
+                        }}
                         onMouseEnter={partial(this.handleMouseHover, showTooltip, hideTooltip)}
                         onMouseMove={partial(this.handleMouseHover, showTooltip, hideTooltip)}
                         onMouseLeave={partial(this.handleMouseLeave, hideTooltip)}

diff --git a/src/components/charts/heatmap/props.js b/src/components/charts/heatmap/props.js
@@ -49,8 +49,11 @@ export const HeatMapPropTypes = {
     colors: quantizeColorScalePropType.isRequired,
     colorScale: PropTypes.func.isRequired, // computed
 
-    // interactivityP
+    // interactivity
     isInteractive: PropTypes.bool,
+
+    // canvas specific
+    pixelRatio: PropTypes.number.isRequired,
 }
 
 export const HeatMapDefaultProps = {
@@ -85,4 +88,7 @@ export const HeatMapDefaultProps = {
 
     // interactivity
     isInteractive: true,
+
+    // canvas specific
+    pixelRatio: window && window.devicePixelRatio ? window.devicePixelRatio : 1,
 }