Drawing a blurred circle in (QML/Javascript) canvas

Question

How can we draw a blurred circle in canvas using QML or Javascript?

I have tried:

var ctx = getContext("2d");
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.shadowBlur = 20;
ctx.shadowColor = "#22ff0000";
ctx.shadowOffsetX = 10;
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.arc(canvas.centerWidth,
  canvas.centerHeight,
  canvas.radius, canvas.angleOffset,
  canvas.angleOffset + canvas.angle);
ctx.stroke();
ctx.restore();

But my problem is the strong line is visible. I need to draw it smoothly without edges. How to do this?

Possible duplicate of [How to draw a blurry circle on HTML5 canvas?](http://stackoverflow.com/questions/5475755/how-to-draw-a-blurry-circle-on-html5-canvas) — dda, Nov 03 '16 at 09:25

folibis · Accepted Answer · 2016-11-03T11:16:34.667

import QtQuick 2.7
import QtQuick.Window 2.0
import QtGraphicalEffects 1.0

Window {
    id:container
    width: 600
    height: 300
    visible: true

    Rectangle {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#F0F0F0" }
            GradientStop { position: 0.5; color: "#FFFFFF" }
        }
        Row {
            anchors.fill: parent

            RadialGradient {
                width: 300
                height: 300
                gradient: Gradient {
                    GradientStop { position: 0.25; color: "#00000000" }
                    GradientStop { position: 0.3; color: "#80F5A9E1" }
                    GradientStop { position: 0.35; color: "#00000000" }
                }

            }

            Canvas {
                id: canvas
                width: 300
                height: 300
                onPaint: {
                    var context = getContext('2d');
                    context.rect(0, 0, canvas.width, canvas.height);
                    var grd = context.createRadialGradient(150, 150, 0, 150, 150, 300);
                    grd.addColorStop(0.25, '#00000000');
                    grd.addColorStop(0.30, '#80F5A9E1');
                    grd.addColorStop(0.35, '#00000000');
                    context.fillStyle = grd;
                    context.fill();
                }
            }
        }
    }
}

Drawing a blurred circle in (QML/Javascript) canvas

1 Answers1