Is it possible to add shadowblur with clip in canvas?

Question

I am drawing a canvas.

I simplified my code.

There is a transparent circle.

The background is rgba 0,0,0,0.5.

I'd like to add "shadowblur" for the transparent circle. However, it's fail.

Is it possible?

I have another logic:

Create one circle with linear-gradient (rgba 0,0,0,0.5, transparent)

However, it seems no good.





    
    
    
    Document

user_3702797 · Answer

If you mean that you want the edges of the clipping-area to be smoother, then you can use compositing to use any bitmap as a mask:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

c.width = window.innerWidth;
c.height = window.innerHeight;

class ball {
    constructor(x, y) {
        this.position = {
            x: x,
            y: y
        }
        this.r = 100

    }
    draw() {
        // fillRect doesn't need beginPath(), and it does fill()
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, c.width, c.height);
        // closePath encloses the current subpath
        // it doesn't "end" the path declaration
        // beginPath does that

        ctx.beginPath();
        ctx.arc(this.position.x, this.position.y, this.r, 0, 2 * Math.PI, false);

        // we use compositing to create our hole, with shadow:
        ctx.globalCompositeOperation = "destination-out";        
        ctx.shadowBlur = 30;
        ctx.shadowColor = "black";
        ctx.fillStyle = 'black';
        ctx.fill();

        // restore
        ctx.shadowBlur = 0;
        ctx.globalCompositeOperation = "source-over";

    }
    update() {
        this.draw()
        this.position.x++
        this.position.y++
    }
}

var Ball = new ball(c.width / 2, c.height / 2)

function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, c.width, c.height);
    Ball.update();
};

animate();

.Preloader {
    background-color: #7bf;
}

This would also work with CanvasGradient instead of shadowBlur:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

c.width = window.innerWidth;
c.height = window.innerHeight;

class ball {
    constructor(x, y) {
        this.position = {
            x: x,
            y: y
        }
        this.r = 100

    }
    draw() {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, c.width, c.height);

        ctx.globalCompositeOperation = "destination-out";
        ctx.fillStyle = ctx.createRadialGradient(this.position.x, this.position.y, this.r, this.position.x, this.position.y, 0);
        ctx.fillStyle.addColorStop(0, "transparent");
        ctx.fillStyle.addColorStop(.25, "black");
        ctx.fillRect(0, 0, c.width, c.height);

        // restore
        ctx.globalCompositeOperation = "source-over";
    }
    update() {
        this.draw()
        this.position.x++
        this.position.y++
    }
}

var Ball = new ball(c.width / 2, c.height / 2)

function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, c.width, c.height);
    Ball.update();
};

animate();

.Preloader {
    background-color: #7bf;
}

Or even in Chrome and Firefox by using CSS blur filters:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

c.width = window.innerWidth;
c.height = window.innerHeight;

class ball {
    constructor(x, y) {
        this.position = {
            x: x,
            y: y
        }
        this.r = 100

    }
    draw() {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, c.width, c.height);

        ctx.beginPath();
        ctx.arc(this.position.x, this.position.y, this.r, 0, 2 * Math.PI, false);

        // we use compositing to create our hole, with shadow:
        ctx.globalCompositeOperation = "destination-out";        
        ctx.filter = "blur(15px)";
        ctx.fill();

        // restore
        ctx.filter = "none";
        ctx.globalCompositeOperation = "source-over";

    }
    update() {
        this.draw()
        this.position.x++
        this.position.y++
    }
}

var Ball = new ball(c.width / 2, c.height / 2)

function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, c.width, c.height);
    Ball.update();
};

animate();

.Preloader {
    background-color: #7bf;
}

Is it possible to add shadowblur with clip in canvas?

1 Answers