To note: Javascript is not running in this browser environment. Our apologies, but this demo has not yet been updated to support progressive enhancement.
Test purpose
- Define a responsive canvas element with a fixed-dimensions base Cell
- Implement line drawing functionality using Polyline entitys. A line will be drawn when user clicks the left mouse button and moves the mouse cursor; line drawing will end when user releases the mouse button, or moves the mouse cursor out of the <canvas> element's base-canvas (the green area)
- Add in user interaction buttons to implement undo/redo, and clear canvas, functionality
Touch test: canvas should be resizable. Known issue: new lines may not start, or may connect to previous line ends - the test needs to be reconsidered and rewritten to make UX more robust.
Annotated code