Added resolution parameter to config.

README.md

@@ -71,6 +71,7 @@ Now you know link fu. Here's a list of customization options:
 - **width** - the number of columns (and rows) to draw. Default is 80.
 - **slant** - which angle is up, in degrees. Default is 0.
 - **bloomSize** - The glow quality, from 0 to 1. Default is 0.5. Lowering this value may help the digital rain run smoother on your device.
+- **resolution** - The image size, relative to the window size. Default is 1. Lowering this value may improve your performance, especially on high pixel density displays.
 - **raindropLength** - the vertical scale of "raindrops" in the columns. Can be any number, even negative! Default is 1.0.
 - **animationSpeed** - the overall speed of the animation. Can be any number, even negative! Default is 1.0.
 - **fallSpeed** - the speed of the rain. Can be any number, even negative! Default is 1.0.

js/config.js

@@ -46,7 +46,8 @@ const defaults = {
     { rgb: [0.57, 0.97, 0.61], at: 1.0 }
   ],
   raindropLength: 1,
-  slant: 0
+  slant: 0,
+  resolution: 1
 };
 
 const versions = {
@@ -129,6 +130,7 @@ const paramMapping = {
   version: { key: "version", parser: s => s },
   effect: { key: "effect", parser: s => s },
   width: { key: "numColumns", parser: s => nullNaN(parseInt(s)) },
+  resolution: { key: "resolution", parser: s => nullNaN(parseFloat(s)) },
   animationSpeed: {
     key: "animationSpeed",
     parser: s => nullNaN(parseFloat(s))

js/main.js

@@ -33,11 +33,12 @@ const effects = {
 };
 
 const config = makeConfig(window.location.search);
+const resolution = config.resolution;
 const effect = config.effect in effects ? config.effect : "plain";
 
 const resize = () => {
-  canvas.width = canvas.clientWidth;
-  canvas.height = canvas.clientHeight;
+  canvas.width = Math.ceil(canvas.clientWidth * resolution);
+  canvas.height = Math.ceil(canvas.clientHeight * resolution);
 };
 window.onresize = resize;
 resize();