Menu
I'm able to draw a simple circle on HTML5 canvas, but I'd like to add some blur around it.
What I found was this website which explains the shadowBlur property which can come in handy here.
However, I cannot manage to make the circle itself blurry. What the shadowBlur property basically does is painting some blur effect after the regular circle has been drawn. What I've tried so far I've put on jsFiddle.
As can be seen, it's a solid filled circle with some blur effect around it - the two parts do not blend into each other at all. What I actually would like to achieve is that the circle itself is fully blurred like this:
Is there any way to draw a blurred circle like this, i.e. that the circle itself also has a blur effect?
879
Simply select the photo, then click “filter” and “advanced options.” Slide to the right to blur, and to the left to sharpen.
To draw arcs or circles, we use the arc() or arcTo() methods. Draws an arc which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction indicated by counterclockwise (defaulting to clockwise).
Definition and Usage The arc() method creates an arc/curve (used to create circles, or parts of circles). Tip: To create a circle with arc(): Set start angle to 0 and end angle to 2*Math. PI. Tip: Use the stroke() or the fill() method to actually draw the arc on the canvas.
External JavaScript However, the Canvas still looks pixelated. This is because the Canvas is rendering to a bitmap of one size then scaling the bitmap to fit the CSS dimensions. To fix this, we modify the Canvas's bitmap dimensions to match the CSS dimensions using JavaScript.
I'd strongly suggest against blur algorithms unless you are blurring some already-existing drawing that is complex.
For your case, just draw a rect with a radial gradient.
var radgrad = ctx.createRadialGradient(60,60,0,60,60,60); radgrad.addColorStop(0, 'rgba(255,0,0,1)'); radgrad.addColorStop(0.8, 'rgba(228,0,0,.9)'); radgrad.addColorStop(1, 'rgba(228,0,0,0)'); // draw shape ctx.fillStyle = radgrad; ctx.fillRect(0,0,150,150); Example:
http://jsfiddle.net/r8Kqy/48/
199
You may find the context.filter property useful
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.filter = "blur(16px)"; context.fillStyle = "#f00"; context.beginPath(); context.arc(100, 100, 50, 0, Math.PI * 2, true); context.fill();<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <canvas width=200 height=200 id='canvas'></canvas> </body> </html>Note as of April 2017, IE, Opera and Safari don't support this
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
