Skip to content

Instantly share code, notes, and snippets.

@jackrugile
Last active November 5, 2016 07:22
Show Gist options
  • Save jackrugile/dc85467eee438d937f63ce810d7fb1b2 to your computer and use it in GitHub Desktop.
Save jackrugile/dc85467eee438d937f63ce810d7fb1b2 to your computer and use it in GitHub Desktop.
Create contained blurred rectangle with HTML 5 canvas
function blurredRect( w, h, blur, color ) {
let c = document.createElement( 'canvas' );
let ctx = c.getContext( '2d' );
c.width = w;
c.height = h;
ctx.fillStyle = color;
ctx.shadowBlur = blur;
ctx.shadowColor = color;
ctx.shadowOffsetX = w;
ctx.shadowOffsetY = h;
ctx.fillRect( -w + blur, -h + blur, w - blur * 2, h - blur * 2 );
return c;
}
let br = blurRect( 400, 400, 100, '#000' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment