Nice work!<p>I noticed that you're caching `this` as a variable:<p><pre><code> var Blur = this,
</code></pre>
And it looks like you're doing so to avoid scope problems in anonymous functions:<p><pre><code> Blur.img.onload = function(){
stackBlurImage( Blur.img, Blur.canvas, blurRadius, Blur.width, Blur.height)
};
</code></pre>
I personally don't like this style. It makes it harder to read the code. If someone misses that `var Blur = this` line, they could get confused and either not use it, or use it incorrectly.<p>Instead, since you're using ES6, I suggest using the fat arrow:<p><pre><code> this.img.onload = () => {
stackBlurImage(this.img, this.canvas, blurRadius, this.width, this.height);
};
</code></pre>
(I'm used to writing Coffeescript instead of ES6, so sorry if minor syntax details are wrong.)<p>This is largely a stylistic choice. You can feel free to do things however you want, and if it works, it works. But generally I prefer to make sure things are really clear, and that the Javascript features aren't obscured.
Does this need to be a canvas-scribbling React component when you can do this with better performance using a couple of lines of CSS filters?<p>Is there some advantage I'm missing?
Nice work.<p>Suggestion: Add support for frosted glass since it's an easy extension.<p>You would only need another parameter for an RGBA color for "tint". Then draw over the blurred area with this color.<p>For example, setting tint to rgba(255,255,255,0.15) will look like the iOS style frosted effect. Varying the rgb and alpha can show other interesting options.
Thanks for the contribution! Minor point: It would be nice if the demo's slider would be draggable on mobile, iOS Safari can't see it in action.