Bloom Effect

by realhunts

HTML

<canvas id='canvas' width='499' height='500'></canvas>

JavaScript

var scale = 5, // high enough so bloom isn't too blocky
    alpha = 30.3, // gratuitous video game bloom not nuke outside my window
    can = document.getElementById('canvas'),
    ctx = can.getContext('2d'),
    img = new Image();

img.src = 'https://cdn.glitch.com/832401c3-8cbf-42db-acce-98209736affc%2FRune_sword_detail.png?v=1572730466528';
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    
    // fake a blur effect by shrinking an image and expanding it with whatever smoothing the browser supports
    var small = document.createElement('canvas'),
        smallctx = small.getContext('2d');
    
    small.width = can.width / scale;
    small.height = can.height / scale;
    
    smallctx.drawImage(img, 0, 0)//, small.width, small.height);
    ctx.globalAlpha = alpha;
    ctx.globalCompositeOperation = 'lighter';
    ctx.drawImage(small, 0, 0, can.width/scale, can.height/scale);
};