Нажмите холст, используя многоугольник и размытый круг ⇐ Javascript

[Anonymous]

Я стараюсь обрезать холст, используя в другой форме: многоугольник (говорящий звезду) и блюд-кружок (его ребра исчезают от прозрачного до частично непрозрачного). < /p>
Вот образец кода, чтобы создать этот клип, но я полностью не могу создать «эффект Blur» вокруг круга. class = "Snippet-Code">
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

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

const img = new Image();
img.src = "https://picsum.photos/800/600";
img.onload = function () {
let mouseX = canvas.width / 2;
let mouseY = canvas.height / 2;
const radius = 70;

function draw() {
ctx.save();

ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

const starPoints = createStar(5, mouseX, mouseY, 100, 50);
ctx.beginPath();
ctx.moveTo(starPoints[0].x, starPoints[0].y);
for (let i = 1; i < starPoints.length; i++) {
ctx.lineTo(starPoints.x, starPoints.y);
}
ctx.closePath();
ctx.clip();

ctx.beginPath();
ctx.arc(mouseX, mouseY, radius, 0, Math.PI * 2);
ctx.clip();

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

ctx.restore();
}

function createStar(points, cx, cy, outerRadius, innerRadius) {
const result = [];
const angleStep = Math.PI / points;
for (let i = 0; i < 2 * points; i++) {
const angle = i * angleStep - Math.PI / 2;
const radius = i % 2 === 0 ? outerRadius : innerRadius;
result.push({
x: cx + radius * Math.cos(angle),
y: cy + radius * Math.sin(angle),
});
}
return result;
}

canvas.addEventListener("mousemove", function (event) {
mouseX = event.clientX;
mouseY = event.clientY;
draw();
});

draw();
};< /code>






body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}





< /code>
< /div>
< /div>

Мне нужно сохранить острые края звезд, но края круга угасает < /p>

Подробнее здесь: https://stackoverflow.com/questions/797 ... red-circle