Skip to content

Instantly share code, notes, and snippets.

@ThaUnknown

ThaUnknown/index.html

Created May 3, 2023 12:01
Show Gist options
  • Save ThaUnknown/f1ff71209cd9c1e9aee8e5e5544ebf27 to your computer and use it in GitHub Desktop.
Save ThaUnknown/f1ff71209cd9c1e9aee8e5e5544ebf27 to your computer and use it in GitHub Desktop.
Download ZIP
Offscreen canvas filter URL not working on workers
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script type="module">
const ctx1 = nofilter.getContext('2d')
ctx1.fillStyle = '#f00'
ctx1.fillRect(0, 0, 100, 100)
const ctx2 = onscreen.getContext('2d')
ctx2.fillStyle = '#f00'
ctx2.filter = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'f\'><feColorMatrix type=\'matrix\' values=\'0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1 0\'/></filter></svg>#f")'
ctx2.fillRect(0, 0, 100, 100)
const ctx3 = offscreen.transferControlToOffscreen()
const worker = new Worker('./worker.js')
worker.postMessage({ canvas: ctx3 }, [ctx3])
</script>
</head>
<body>
<canvas id="nofilter" width="100" height="100"></canvas>
<canvas id="onscreen" width="100" height="100"></canvas>
<canvas id="offscreen" width="100" height="100"></canvas>
</body>
</html>
Raw
worker.js
onmessage = ({ data }) => {
const ctx = data.canvas.getContext('2d')
ctx.fillStyle = '#f00'
ctx.filter = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'f\'><feColorMatrix type=\'matrix\' values=\'0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1 0\'/></filter></svg>#f")'
ctx.fillRect(0, 0, 100, 100)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment