fake backdrop-filter

fake.js

var ti = new Image()
var p = 0,
    d = 1
var py = 0,
    dy = 1
ti.src = 'http://webneel.com/daily/sites/default/files/images/daily/05-2014/12-sunrise-picture.jpg'
var c = document.querySelector('canvas'),
    ctx = c.getContext('2d'),
    filter = function(img, x, y, w, h, bg, rad) {
      var cc = document.createElement('canvas'),
          cctx = cc.getContext('2d')
      cc.width = img.width
      cc.height = img.height
      cctx.drawImage(img,0,0)
      cctx.filter = rad
      cctx.drawImage(img,0,0)
      cctx.filter = ''
      ctx.fillStyle = bg
      ctx.drawImage(cc, x, y, w, h, x, y, w, h)
      ctx.fillRect(x, y, w, h)
    }
up = function() {
  c.width = 1000
  c.height = 300
  if(Math.abs(p) > 200) d = -d
  if(Math.abs(py) > 100) dy = -dy
  p += d
  py += dy
  ctx.drawImage(ti, p - 200, py - 100)
  var v = document.querySelector('#filter').textContent,
      bg = document.querySelector('#colour').textContent
  ctx.fillStyle = "#fff"
  ctx.font = '3rem monospace'
  ctx.fillText("Some Text", p + 250,  py + 120)
  document.querySelector("#real").style.backgroundColor = bg
  document.querySelector("#real").style.backdropFilter = v
  filter(c, 295, 50, 200, 100, bg ? bg : 'transparent', v ? v : 'blur(10px)')
  document.querySelector('#filter').className = v ? "value val" : "value"
  document.querySelector('#colour').className = bg ? "value val" : "value"
  requestAnimationFrame(up)
}
ti.onload = function() {
  requestAnimationFrame(up)
}

var els = document.querySelectorAll('span[contenteditable]')
for(var i = 0; i < els.length; ++i) {
  els[i].addEventListener('input', function(e) {
    var ss = saveSelection(e.target)
    console.log(e.target)
    e.target.textContent = e.target.textContent
    e.target.innerHTML = e.target.innerHTML.replace(/\b([^ ]*)\(([^\)]*)(\)?)/gi, "<span class='func'>$1</span><span class='punctuation'>(<span class='value'>$2</span>$3</span>").replace(/#(([0-9a-f]{8})|([0-9a-f]{6})|([0-9a-f]{3,4}))/gi, "<span class='colour'>#$1</span>")
    restoreSelection(e.target, ss)
  })
}