applyCanvasStyle method

void applyCanvasStyle({
  1. BoxFit fit = BoxFit.fill,
  2. FilterQuality quality = FilterQuality.none,
})

Styles the canvas through CSS, honouring fit and quality the way Flutter would if it composited these pixels itself.

A method here rather than a public canvas, because this package depends on neither package:web nor anything else that would hand an element to a caller outside this file — see this file's own top-of-file doc comment. WebGlDevice exposes its canvas directly for the same job because its canvas already depends on package:web; this device's does not, and keeping _Canvas/_Style private is what lets it stay that way.

Implementation

void applyCanvasStyle({
  BoxFit fit = BoxFit.fill,
  FilterQuality quality = FilterQuality.none,
}) {
  _canvas.style
    ..width = '100%'
    ..height = '100%'
    // A display surface, not a control. Left interactive, the canvas takes
    // the pointer events over it and the Flutter widgets above the platform
    // view never see them — which reads as an application whose camera does
    // not turn while its keyboard works fine.
    ..pointerEvents = 'none'
    ..objectFit = switch (fit) {
      BoxFit.contain => 'contain',
      BoxFit.cover => 'cover',
      BoxFit.fill => 'fill',
      BoxFit.fitWidth ||
      BoxFit.fitHeight ||
      BoxFit.none ||
      BoxFit.scaleDown => 'contain',
    }
    ..imageRendering = quality == FilterQuality.none ? 'pixelated' : 'auto';
}