Get started with stackblur-canvas CDN

MIT licensed

StackBlur-Canvas: library for fast WebGL image blurring in browsers.

Tags:
  • stackblur
  • blur
  • canvas
  • gaussian

Stable version

Copied!

How to start using stackblur-canvas CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with stackblur-canvas CDN - cdnhub.io</title>
    <style>
        #output {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="input" width="300" height="300" style="display: none;"></canvas>
    <canvas id="output" width="300" height="300"></canvas>
    <script src="https://cdn.cdnhub.io/stackblur-canvas/2.7.0/stackblur.min.js"></script>
    <script>
        const inputCanvas = document.getElementById('input');
        const outputCanvas = document.getElementById('output');
        const stackblur = new OffscreenCanvas(inputCanvas.width, inputCanvas.height);
        const ctxStackblur = stackblur.getContext('2d');

        inputCanvas.getContext('2d').drawImage(inputCanvas, 0, 0);

        stackblur.onload = () => {
            ctxStackblur.drawImage(inputCanvas, 0, 0);
            const blurredImage = stackblur(ctxStackblur.getImageData(), 10);
            outputCanvas.getContext('2d').putImageData(blurredImage, 0, 0);
        };

        inputCanvas.addEventListener('load', () => {
            inputCanvas.style.display = 'block';
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions