Large 'lineWidths' for raster graphics are clipped by the bounding box.

[V-A-Kaiser]

Steps to Reproduce

Create a new circle raster and add it to an actor with the following code.

const baseCircle = new Circle({
  radius: 100
  lineWidth: 50,
  color: Color.White,
  strokeColor: Color.White.darken(0.2),
  quality: 2
});

this.graphics.add("Base", baseCircle);
this.graphics.show("Base");

Expected Result

The bounding box is given extra padding based on the line width so that it is not clipped.

Actual Result

The line generated by the raster graphic is clipped by the bounding box.

Workarounds

Explicitly defining a 'padding' value solves the clipping problem, but the raster renderer should take this into account implicitly.

const baseCircle = new Circle({
  radius: 100
  lineWidth: 50,
  color: Color.White,
  strokeColor: Color.White.darken(0.2),
  padding: 25,
  quality: 2
});

Environment

• Browser: Chrome (Version 105.0.5195.102 (Official Build) (64-bit))
• OS: Windows 10
• Excalibur Version: Excalibur.js v0.27.0

[eonarheim]

Hi @CTLaChance, thanks for the issue!

Totally agree, this is unexpected

[github-actions]

This issue hasn't had any recent activity lately and is being marked as stale automatically.

[eonarheim]

One workaround here may be to set the Circle.padding to increase the size of the underlying bitmap.