Canvas and the HTML5 2D Model
A CanvasPlaygroundPage ports a set
of browser Canvas 2D examples to the documented Wisej.Web.Canvas API: paths and fills, a placed
caption, linear and radial gradients, four transform blocks bracketed by Save/Restore, and a state
section with a clip, a reduced alpha, a dash pattern and a shadow.
The three remaining Module 1 surfaces - Label + ProgressBar, a Wisej.Web.Canvas and an
off-screen Bitmap in a PictureBox - stay on the operations page under the gauges, so the same
reading can still be compared across surfaces. Surface 2, the inline Paint handler, is now the
TelemetryGauge control itself.
This folder is the complete application at this point in the course, with its own solution and port.
Run it
cd "Drawing and Painting Course/Module 4/VisualOperationsStudio"
dotnet run -f net10.0 --urls http://localhost:6004
Open http://localhost:6004 and press Canvas playground on the operations page.
What to try
| Action | Expected result |
|---|---|
| Open the playground | Five sections arrive in one update, because LiveUpdate is off for the main render. |
| Resize the browser | The surface goes blank, then Redraw calls DrawPlayground and the scene comes back unchanged. |
| Press Progressive draw (LiveUpdate) | LiveUpdate is switched on for one short server-side loop; the eight steps appear one at a time, then it is switched off again. |
| Look at the rotated square | The browser example rotated by Math.PI / 4; Canvas.Rotate takes degrees, so the port is Rotate(45) — a quarter turn, not a fraction of a degree. |
Delete a Restore() in DrawTransforms and re-run | Everything drawn after that block visibly shifts, because the transform is Canvas state. |
| Press Back to operations | The operations page comes back with its gauges and grid intact — the same page instance, not a rebuilt one. |