HTML5 Canvas, SVG Outline Or Glow

Contributor ,
Apr 12, 2020 Apr 12, 2020

Copy link to clipboard

Copied

Hello,

I am rewriting my AS3 application with HTML5 Canvas. I am importing SVG graphics, and I need to make an outline around those graphics that varies in width depending on user input.

In AS3, I used the glow filter, but it is no longer available (please see the attached photo, showing how I made an outline around imported graphics using the glow filter.).  And, it seems that CreateJS does not have a glow filter.  

Can anyone point me in the right direction of how to 1) use a third-party JS library to obtain a glow filter, 2) draw an outline around these SVGs, or 3) any other ideas?  Thank you for any help!

outline.jpg

 

Views

441

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 13, 2020 Apr 13, 2020

Copy link to clipboard

Copied

Hi.

 

You can use the Shadow class to simulate an outline/glow.

 

Please let us know if you have any further questions.

 

 

Regards,

JC

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 13, 2020 Apr 13, 2020

Copy link to clipboard

Copied

Thanks, JC.

I tried the Shadow class, but I cannot achieve a hard edge to simulate an outline (see image).  I also looked at BlurFilter, but that, too, doesn't have the ability to make a hard edge.  I've also scoured the web for hours looking for any technique for adding a stroke outline via Javascript, similar to how this is done through HTML.  I am stumped.  If you have thoughts, I'd appreciate it!  Thank you.

- Steve

svg_with_shadow.jpg

 

const loader = new createjs.LoadQueue(false, null, true);
loader.on("complete", e =>
{
    const bitmap = new createjs.Bitmap(e.currentTarget.getResult("test"));
    this.addChild(bitmap);
	
	// Scale image
	bitmap.scaleX = bitmap.scaleY = 1;
	
	// Get width and height
	console.log( "Width = " + bitmap.getBounds().width );
	console.log( "Height = " + bitmap.getBounds().height );
	
	bitmap.shadow = new createjs.Shadow("#00FF00", 0, 0, 10);
	
});
loader.loadManifest([{id:"test", src:"images/global_6000.svg", type:"image"}]);

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

Hi.

 

Yeah... Unfortunately it seems the edges are always soft using the Shadow class.

 

I'll think on something... If I come up with a solution, I'll let you know.

 

Meanwhile... What I think you will have to do is to create each plane as a separated SVG DOM element and then apply some CCS to it to create the outline.

 

 

Regards,

JC

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

Hi JC,

Great!  Thank you for the suggestion -- let me kick that around a little and see if I can make that work.

- Steve

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 16, 2021 Sep 16, 2021

Copy link to clipboard

Copied

LATEST

JC, I'm still trying to figure out how to apply an outline or a glow to a SVG that is loaded as a Bitmap.  

 

When you say SVG DOM Element, I'm not sure how to apply that in Adobe Animate/HTML5 Canvas.  Given my code above, could you be more specific?  Thanks for any help.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines