)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Canvas Blur Repeatedly

  1. document.body.style.margin = 0
  2. const canvas = document.body.appendChild(
  3.   document.createElement('canvas')
  4. )
  5. const c = canvas.getContext('2d')
  6.  
  7. function clear() {
  8.   c.fillStyle = 'rgb(95 182 209)'
  9.   c.fillRect(0, 0, innerWidth, innerHeight)
  10. }
  11.  
  12. function resize() {
  13.   canvas.width = innerWidth
  14.   canvas.height = innerHeight
  15.   clear()
  16. }
  17. resize()
  18.  
  19. addEventListener('resize', resize)
  20.  
  21. function loop() {
  22.   const size = Math.min(innerWidth / 2, 
  23.   innerHeight / 2)
  24.   const halfSize = size / 2
  25.  
  26.   c.filter = 'blur(50px)'
  27.   c.fillStyle = 'rgba(0, 0, 0, 0.02)'
  28.   c.fillRect(
  29.     innerWidth / 2 - halfSize, 
  30.     innerHeight / 2 - halfSize,
  31.     size, size)
  32.  
  33.   requestAnimationFrame(loop)
  34. }
  35. loop()

Apply a blur filter to a rectangle over and over again…

Browser support at the time of the post is still lacking – and there are some interesting rendering differences between Chrome and Firefox:

Firefox on left and Chrome on right…

As nice as it would be to be able to use these I don’t recommend it yet. Using a GLSL shader is the way to go for now…

// canvas // filters // javascript

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}