How to spread out blur filter radius in HTML5 Canvas?

user_10881621 0
Viewed 486

I'm trying to create a watercolor fill effect with HTML5 canvas's blur filter, but I'm having an issue. When I hold my mouse in one position for more than a second or so, I'm left with a weird circular/bullseye residue (imgs attached). I can shake my mouse over a circle for a while and blur it out, but it's frustrating to do that and doesn't look great. How do I spread out the blur radius to avoid getting this weird residue effect?

enter image description here

enter image description here

My code:

const canvas = document.getElementById('myCanvas');
let c = canvas.getContext("2d");
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;

var mouseX, mouseY, pMouseX, pMouseY;
let baseR, baseG, baseB;
let color;
setup();



function setup() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;

    baseR = Math.floor(Math.random() * 255);
    baseG = Math.floor(Math.random() * 255);
    baseB = Math.floor(Math.random() * 255);

    color = `rgba(${baseR}, ${baseG}, ${baseB})`;

    background("rgba(255, 255, 255, 0.00025)");
    draw();
};

function draw() {

    c.lineCap = "round";
    c.lineJoin = "round";
    background("rgba(255, 255, 255, .00001");
    c.strokeStyle = color;

    c.beginPath();
    c.lineWidth = 30;
    c.globalCompositeOperation = 'source-over';
    c.filter = `blur(30px) opacity(5%)`;
    c.stroke();
    c.lineWidth = 28;
    c.globalCompositeOperation = 'darken';
    c.filter = `blur(30px) opacity(10%)`;
    c.moveTo(pMouseX, pMouseY);
    c.lineTo(mouseX, mouseY);
    c.stroke();
    c.closePath();

    setTimeout(draw, 10);
};

function background(color) {
    c.beginPath();
    c.rect(0, 0, width, height);
    c.fillStyle = color;
    c.fill();
    c.closePath();
}

document.onmousemove = function (e) {
    pMouseX = mouseX;
    pMouseY = mouseY;
    mouseX = e.clientX;
    mouseY = e.clientY;
};

window.onresize = function (event) {
    setup();
};

document.onkeydown = function () {
    console.log('hi');
    color = `rgba(${Math.floor(Math.random() * baseR)},
    ${Math.floor(Math.random() * baseG)},
    ${Math.floor(Math.random() * baseB)})`;
    console.log(color);

}
<canvas id="myCanvas"></canvas>

html5-canvas canvas html javascript
1 Answers

You can add a random offset to the mouse position each time the canvas is drawn.

const canvas = document.getElementById('myCanvas');
let c = canvas.getContext("2d");
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;

var mouseX, mouseY, pMouseX, pMouseY;
let baseR, baseG, baseB;
let color;
setup();



function setup() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;

    baseR = Math.floor(Math.random() * 255);
    baseG = Math.floor(Math.random() * 255);
    baseB = Math.floor(Math.random() * 255);

    color = `rgba(${baseR}, ${baseG}, ${baseB})`;

    background("rgba(255, 255, 255, 0.00025)");
    draw();
};

function draw() {
    c.lineCap = "round";
    c.lineJoin = "round";
    background("rgba(255, 255, 255, .00001");
    c.strokeStyle = color;

    c.beginPath();
    c.lineWidth = 30;
    c.globalCompositeOperation = 'source-over';
    c.filter = `blur(30px) opacity(5%)`;
    c.stroke();
    c.lineWidth = 28;
    c.globalCompositeOperation = 'darken';
    c.filter = `blur(30px) opacity(10%)`;
    c.moveTo(pMouseX, pMouseY);
    
    const xOffset = (Math.random() - .5) * 30,
    yOffset = (Math.random() - .5) * 30;
    c.lineTo(mouseX + xOffset, mouseY + yOffset);
    c.stroke();
    c.closePath();

    setTimeout(draw, 10);
};

function background(color) {
    c.beginPath();
    c.rect(0, 0, width, height);
    c.fillStyle = color;
    c.fill();
    c.closePath();
}

document.onmousemove = function (e) {
    pMouseX = mouseX;
    pMouseY = mouseY;
    mouseX = e.clientX;
    mouseY = e.clientY;
};

window.onresize = function (event) {
    setup();
};

document.onkeydown = function () {
    console.log('hi');
    color = `rgba(${Math.floor(Math.random() * baseR)},
    ${Math.floor(Math.random() * baseG)},
    ${Math.floor(Math.random() * baseB)})`;
    console.log(color);

}
<canvas id="myCanvas"></canvas>

Another idea would be to reduce the opacity or grow the offset range while the mouse is still.

user_92534140
Related