v136 · webcodecs
Canvas Renderer
When a VideoFrame carries rotation or flip metadata, drawing it naively with ctx.drawImage(frame) ignores the orientation entirely. This demo shows the correct approach — reading frame.rotation and frame.flip and applying the canvas transforms — vs the naive approach that produces a wrong result.
checking VideoFrame…
Chrome 136 adds
rotation and flip to VideoFrameInit and the VideoFrame object. When you draw a rotated frame to canvas, you must apply the transform yourself — the browser does not auto-orient on drawImage(). This is the same pitfall as the EXIF orientation bug in <img> before CSS image-orientation.
Frame configuration
Select rotation and flip to see whether the renderer can take the cheap path.
Rendering comparison
Naive (wrong): ctx.drawImage(frame)
orientation ignored — wrong result for rotated content
Correct: apply transform then drawImage
orientation applied — upright result
Transform order
The WebCodecs rendering model applies rotation first, then horizontal flip if
frame.flip is true. Canvas transform calls compose as a matrix, so this helper calls scale(-1, 1) before rotate() to make points render as rotate-then-flip.
Spec order: rotate, then flip
Opposite order: flip, then rotate
Correct rendering code
Select rotation and click Render.