0

I want to draw shape like this: How to draw a blurry circle on HTML5 canvas? on canvas where I'm using EaselJs. I'll do some basic drawing and I need blurry semi transparent circles, is there any other way in Easel to achieve this?

Is anything wrong if I try to handle blurry circles without easel?

Community
  • 1
  • 1
ewooycom
  • 2,651
  • 5
  • 30
  • 52

3 Answers3

1

You can set the alpha of the shape to get a semi transparent circle. Then use BoxBlurFilter to make it blurry.. All of this is available in the Easel JS online documentation and examples are present in the GitHUB
for example to get a semi transparent circle you can do

var shape = new createjs.Shape();
var g = shape.graphics;
g.beginFill("#FFFFFF");
g.drawCircle(0,0,10);
g.endFill();
shape.alpha = 0.5;
stage.addChild(shape);
Azzy Elvul
  • 1,403
  • 1
  • 12
  • 22
Parv Sharma
  • 12,581
  • 4
  • 48
  • 80
0

I can't comment for EaselJS but in regular canvas you could draw a red circle which has a red shadow - with X offset as 0, Y offset as 0 and blur as roughly 25.

Richard
  • 4,809
  • 3
  • 27
  • 46
0

To draw a circle with a blurry outline like shown in How to draw a blurry circle on HTML5 canvas?, you need to fill the EaselJS Shape with a radial gradient using the same red color but varying transparency values. The key is to specify the colors via the rgba() function, which let you set the alpha channel (opacity or transparency).

Here is the code snippet:

var circle = new createjs.Shape();

var solidRed = 'rgba(255, 0, 0, 1)';
var transparentRed = 'rgba(255, 0, 0, 0)';

circle.graphics.beginRadialGradientFill(
                  [ solidRed, solidRed, transparentRed ],
                  [ 0, 0.75, 1 ],
                  0, 0, 0,
                  0, 0, 100)
                .drawCircle(0, 0, 100);

3 "stop" colors are provided to the radial gradient fill of a 100px radius circle (specified by the 2 arrays [ solidRed, solidRed, transparentRed ] and [ 0, 0.75, 1 ]): solid red at the center, solid red at 75% of the radius, and transparent red at the radius.

The gradient will generate a 75px circle filled with solid red, bordered by a halo going from solid red at 75px to completely transparent red at 100px.

Then you can have fun adjusting:

  • that threshold value at which the transparent gradient start (2nd element of the 2nd array: closer to 0 gives you a larger blurry outline, closer to 1 gives you a sharper outline)
  • the alpha value of your EaselJS Shape (now even the solid circle in the center will also be semi-transparent)
  • the compositeOperation of your EaselJS Shape if you plan to have multiple circles overlaps ('lighter' will add the colors together towards white).

I've used a mix of these 3 techniques to create this image with EaselJS.

Community
  • 1
  • 1
user645385
  • 1