Canvas

A 2D context is everywhere. OffscreenCanvas is what Capture uses when it is there, and Capture works either way. WebGL and WebGPU are probes rather than wrappers - Butil does not wrap either, but 'can this device do it at all' is often the question behind the feature.

@inject Bit.Butil.Canvas canvas

var supported = await canvas.IsSupported();
var offscreen = await canvas.IsOffscreenSupported();
var webgl = await canvas.IsWebGlSupported();
var webgpu = await canvas.IsWebGpuSupported();

Source coordinates are in the source's own intrinsic pixels, not the size CSS is displaying it at - so a video laid out at 320px still yields its full frame. Note what GetSize reports: the pixel buffer and the CSS box are two different sizes, and the two disagreeing is the usual cause of a blurry canvas. Setting either dimension clears the canvas, even to the value it already had.

private ElementReference _canvas;
private ElementReference _image;

await canvas.SetSize(_canvas, 320, 160);
await canvas.DrawImage(_canvas, _image);

// or just a corner of it, in a corner of the canvas:
await canvas.DrawImage(_canvas, _image, new CanvasDrawOptions
{
    SourceWidth = 100, SourceHeight = 50,
    DestinationWidth = 160, DestinationHeight = 80
});

Live sample

Draw it Draw a corner, scaled GetSize Clear

Source

Canvas

draw output Clear

Results will appear here when you interact with the samples.

A data URL is base64, so it is about a third larger than the bytes it carries and it all sits in a string - fine for a preview, wasteful for anything else. ToBytes is what you upload or hash. An unsupported MIME type silently falls back to PNG rather than failing, which is worth knowing when a WebP export comes back looking like a PNG.

var url = await canvas.ToDataUrl(_canvas);                       // <img src="...">
var png = await canvas.ToBytes(_canvas);                         // upload this
var jpeg = await canvas.ToBytes(_canvas, "image/jpeg", 0.7);     // smaller, lossy

Live sample

ToBytes (PNG) ToBytes (JPEG 0.7) ToDataUrl

This section's canvas

export output Clear

Results will appear here when you interact with the samples.

Capture draws into a scratch canvas it discards afterwards, so nothing has to exist in your markup. Give one dimension and leave the other at 0 to keep the aspect ratio - a thumbnail is one number, not two. The source's intrinsic size is what gets captured, not the size CSS is showing it at.

// 120px wide, height follows the aspect ratio
var thumbnail = await canvas.Capture(_image, width: 120, type: "image/jpeg", quality: 0.7);

// or straight to something you can show
var url = await canvas.CaptureToDataUrl(_image, width: 120);

Live sample

120px wide 48px wide

Source

thumbnail output Clear

Results will appear here when you interact with the samples.

The headline case: MediaDevices opens the stream, a video element shows it, and Capture takes a frame as bytes - the whole path from camera to upload, in C#. Needs a secure context and the camera permission, so this one prompts.

private ElementReference _video;

var stream = await mediaDevices.GetUserMedia(audio: false, video: true);
await stream!.AttachTo(_video);

// ... and later, a frame:
var photo = await canvas.Capture(_video, width: 640, type: "image/jpeg", quality: 0.85);