fix: [#2490] Circle lineWidth now factored (#2662)

Closes #2490 

The PR adjusts the underlying padding dynamically to account for lineWidth in the `Circle` constructor

CHANGELOG.md

@@ -46,6 +46,7 @@ are returned
 
 ### Fixed
 
+- Fixed issue where setting lineWidth on `ex.Circle` was not accounted for in the bitmap
 - Fixed issue in macos where the meta key would prevent keyup's from firing correctly
 - Fixed issue when excalibur was hosted in a x-origin iframe, the engine will grab window focus by default if in an iframe. This can be suppressed with `new ex.Engine({grabWindowFocus: false})`
 - Fixed issue where `ex.Camera.rotation = ...` did not work to rotate the camera, also addressed offscreen culling issues that were revealed by this fix.

sandbox/tests/graphics/index.ts

@@ -21,7 +21,7 @@ class Game extends ex.Engine {
       radius: 30,
       strokeColor: ex.Color.DarkGray,
       lineWidth: 10,
-      padding: 20,
+      // padding: 20,
       smoothing: true,
 
     });

src/engine/Graphics/Circle.ts

@@ -23,7 +23,8 @@ export class Circle extends Raster {
   }
   constructor(options: RasterOptions & CircleOptions) {
     super(options);
-    this.padding = options.padding ?? 2; // default 2 padding for circles looks nice
+    const lineWidth = options.lineWidth ?? (options.strokeColor ? 1 : 0); // default lineWidth in canvas is 1px
+    this.padding = options.padding ?? 2 + (lineWidth / 2); // default 2 padding for circles looks nice
     this.radius = options.radius;
     this.filtering = options.filtering ?? ImageFiltering.Blended;
     this.rasterize();

src/spec/CircleSpec.ts

@@ -56,6 +56,25 @@ describe('A Circle Graphic', () => {
     await expectAsync(canvasElement).toEqualImage('src/spec/images/GraphicsCircleSpec/circle.png');
   });
 
+  it('can set a lineWidth', async () => {
+    const sut = new ex.Circle({
+      radius: 30,
+      lineWidth: 15,
+      color: ex.Color.Green,
+      strokeColor: ex.Color.Black
+    });
+
+    const canvasElement = document.createElement('canvas');
+    canvasElement.width = 100;
+    canvasElement.height = 100;
+    const ctx = new ex.ExcaliburGraphicsContext2DCanvas({ canvasElement });
+
+    ctx.clear();
+    sut.draw(ctx, 0, 0);
+
+    await expectAsync(canvasElement).toEqualImage('src/spec/images/GraphicsCircleSpec/line-width.png');
+  });
+
   it('can be cloned', () => {
     const sut = new ex.Circle({
       radius: 10,