Drawing
▪ Drawing models
▪ SimpleKit
▪ Graphics context
▪ Drawable Object
▪ Painter’s Algorithm
▪ Display List
Drawing 1
Model-View-Controller (MVC)
present
View
perceive notify
mental system
model Model model
express
change
Controller
translate
Drawing 2
Graphical Presentation Architecture
View
Graphics
Windowing
System Model
Input
Controller
Drawing 3
Windows
▪ Windows are a visual and architectural organizing principle
- Each window has a location (or is hidden/off-screen)
- Each window has a size
- Each window has a "depth" (e.g. stacking order)
- Only one window has "focus" to receive user input
- Each window is associated with an application
▪ Applications running in windows can be isolated
- Each has its own memory, resources, and drawing canvas
Drawing 4
Windowing System
▪ The windowing system is an operating system layer to share
screen space and user input among applications
▪ Provides three main services:
1. Manage list of windows: creating, resizing, focusing, etc.
2. Provide each application with an independent drawing area
3. Dispatch low-level input events to the focused window
Window 1
Window 2
Application 1
Application 2
Windowing System
Hardware Abstraction Layer
GPU
Drawing 5
Canvas Abstraction
▪ The windowing system uses a drawing canvas abstraction
- Each application has a defined drawing area within the window
- The drawing area has its own local coordinate system
(due to historical convention [0, 0] is at top-left)
- The drawing area is typically implemented as a graphics buffer
▪ The windowing system renders the buffer at the window position
- uses very fast method called bitblt (bit block transfer)
(0,0)
display
(0,0)
application
(0,0)
application
Drawing 6
Window Manager
▪ The windowing system also has a window manager to
render the window "chrome" and provide a window UI
- buttons for closing, minimizing, maximizing window
- draggable areas for resizing and moving window
- rendering "look & feel"
window
manager
UI
window window
manager manager
UI UI
Drawing 7
Browser as Windowing System
▪ A modern web browser is like a windowing system
- it manages a list of tabs: creating, focusing, etc.
- it provides each tab with an independent drawing area
- it dispatches events to the focused tab
- the browser interface (enter a URL, back button, refresh, etc.) is
like an expanded window manager interface
Drawing 8
Drawing and User Interface Toolkits
▪ A graphical user interface is essentially a drawing of shapes
- rectangles, lines, text, fills, etc.
▪ User interaction is essentially how these shapes change
- responding to user input, animation, or external data
▪ A UI toolkit provides a level of abstraction for programmers
- e.g. translates programmer’s concept of a "button" into shapes
that represent a rendering of a button
shadow
fill
button() OK
stroke
OK text
We'll start by only drawing shapes without a UI toolkit
Drawing 9
Drawing Primitives
▪ Three conceptual models for drawing:
Pixel
SetPixel(x, y, colour)
Stroke
DrawLine(x1, y1, x2, y2)
Region
DrawRect(x, y, w, h)
Drawing 10
Drawing Style
Consider DrawLine( … )
- what style options are there?
▪ Observations:
• most choices are the same for multiple
calls to DrawLine()
• lots of different parameters, but may only
want to set one or two
Drawing 11
Graphics Context
▪ A common approach to manage state of drawing style options
▪ A drawing command like DrawLine(x1, y1, x2, y2) is rendered
using the current state of style options
Stroke(RED)
StrokeThickness(5)
DrawLine( … )
Stroke(BLUE)
DrawLine( … )
StrokeThickness(10)
DrawLine( … )
Drawing 12
html-canvas
▪ HTML canvas (HTMLCanvasElement) is a literal "canvas abstraction"
▪ Can create with a <canvas> tag
▪ We’ll always create it in code
- Compare [Link] to “Elements” in dev console
- Using createElement and appendChild
- Using getContext
- type narrowing
▪ CanvasRenderingContext2D
- Drawing commands
- Set drawing style
Drawing 13
SimpleKit
▪ We’re using SimpleKit for first part of course (incl. A1 and A2)
- Simulates a windowing system and other UI layers in browser
- Different toolkit modes (e.g. canvas-mode, imperative-mode)
- By design, it’s somewhat incomplete and very limited
- We'll examine how it's built to illustrate UI architecture
▪ The demo repo includes SimpleKit as a git submodule You’ll use SimpleKit
as an npm package
- See README for cloning and updating instructions in your assignments
- Vite projects for demos use the simplekit in the submodule
Drawing 14
simplekit-canvas
Most basic usage for SimpleKit “canvas mode”:
1. Import what you need
import { startSimpleKit, setSKDrawCallback }
from "simplekit/canvas-mode";
2. Start it up (creates full page canvas, etc. )
startSimpleKit();
3. Set the drawing callback
setSKDrawCallback((gc) => {
[Link](10, 10, 50, 50);
});
Drawing 15
simplekit-canvas rectangleDemo()
▪ Different drawing orders
▪ What happens when gc changes state at end?
Drawing 16
simplekit-canvas pathDemo()
▪ Draw line
- moveTo vs lineTo
▪ Draw polyline or polygon
- closePath
▪ Draw circle
- Using arc
- Using ellipse
▪ Draw rect “path”
- fill then stroke
Drawing 17
simplekit-canvas pathHouseDemo()
▪ Drawing from list of points
▪ How to position the shape?
▪ (TypeScript note) type for array of 2D points
Drawing 18
simplekit-canvas textDemo()
▪ Setting font size (requires font name or type)
▪ Vertical and horizontal alignment also a gc state change
Drawing 19
Specifying Colour
▪ fillStyle and strokeStyle properties use CSS color syntax
▪ Named colour (more than 100)
"red" , "blue" , "cornflowerblue" , "deeppink"
▪ Hexadecimal colour as #RGB, #RRGGBB
"#f00" , "#0000ff" , "#6495ed" , "#ff1493"
▪ RGB: Red, Green, Blue
"rgb(255 0 0)" , "rgb(100, 149, 237)"
▪ HSL: Hue, Saturation, Luminance
"hsl(0deg 100% 100%)" , "hsl(219deg 58% 93%")
▪ (many other formats and variations)
useful colour guide
[Link] Drawing 20
simplekit-canvas colourDemo()
▪ Using string literal to set colour
▪ How to prevent flicker?
Drawing 21
CanvasRenderingContext2D State
▪ Convenient to save and restore the state of drawing styles
- strokeStyle, fillStyle, lineWidth, font, textAlign, textBaseline, ...
save() to push current drawing state to stack
restore() to pop last saved drawing state and restore it
▪ Can call save() multiple times without restore(), each call pushes a
state onto the stack that can be popped off later
Drawing 22
simplekit-canvas saveState()
[Link] = "blue";
[Link] = "red";
[Link] = 5;
circle(50, 50);
[Link](); save state: fill = blue, stroke = red, lineWidth = 5
[Link] = "yellow";
[Link] = "black";
[Link] = 2;
circle(110, 50);
[Link](); restore state back to: fill = blue,
stroke = red, lineWidth = 5
circle(170, 50);
Drawing 23
simplekit-canvas fpsDemo()
▪ Demonstrates 60 FPS draw loop
- Frame number
- Frame-per-second calculation (with smoothing)
- Importance of [Link]
- [Link] and [Link]
Drawing 24
Drawable Objects
▪ Drawable class
▪ Display list
▪ Painter's Algorithm
Drawing 25
Drawable Object
Drawing using the graphics context API can be tedious, instead:
1. Define interface for an object that can be drawn:
export interface Drawable {
draw: (gc: CanvasRenderingContext2D) => void;
}
2. Define drawable objects like:
export class MyShape implements Drawable {
...
draw(gc: CanvasRenderingContext2D) {
// drawing commands go here
}
}
3. Create the object and draw it using current graphics context:
const myShape = new MyShape( ... )
[Link](gc);
Drawing 26
drawable squareDemo()
▪ ES module with objects
▪ Drawable interface
▪ Square1 is a basic drawable
▪ Add a fill property to Square1 and update draw code
▪ Square2 is drawable with props constructor
- Convert Square1 calls to Square2
Drawing 27
Painter’s Algorithm
▪ Basic graphics primitives are (really) primitive.
▪ To draw more complex shapes:
- Combine primitives
- Draw back-to-front, layering the image
- Called “Painter’s Algorithm”
draw draw result
back first front last
Drawing 28
The 1 Minute Painting
- [Link]
Drawing 29
drawable paintersDemo()
▪ Draw order of square and cat
▪ Cat drawable example
- not using props
- drawing strategy (see next slide)
- translate and scale in graphics context
- need to save and restore state when transforming
Drawing 30
Strategy to Draw Complex Shapes
▪ Draw with coordinates in convenient coordinate frame
▪ Transform shapes to desired location, e.g. [Link]( ..)
(0,0)
Drawing 31
Display List
▪ Keep an ordered display list of Drawable objects
- Add objects to array from back to front
- (Could also add “z-depth” field and sort when object added)
▪ To draw all objects:
- iterate through list and draw each one
Drawing 32
drawable: displayListDemo()
▪ Create Cat and two Square2 objects, add to same displaylist
▪ The order added matters
▪ Adding many random Square2 shapes
- moving object to front of displaylist
Drawing 33
Efficiency
▪ Our common approach so far is to re-draw everything every frame
▪ Executing many graphics commands each frame is often fine
- As a rule, don’t optimize until you have to
- When animating, you may have to re-draw everything
▪ With a very large number of drawables, each with a very large
number of graphics context drawing commands, the frame rate
may start to drop
- In many cases, the drawable doesn’t change each frame
Drawing 34
Resources
MDN Canvas Tutorial
- [Link]
Drawing 36
Exercise
EXERCISE
1. Create your own SimpleKit project
- Create a new minimal Vite project, install simplekit from npm
- Import “canvas-mode” from simplekit, call startSimpleKit()
- check console for the start up message
2. Draw a button in SimpleKit canvas-mode
- Set your drawing callback function with SimpleKit
- Use the painter’s algorithm to draw in layers
- Add a conditional to optionally draw a yellow ”hover” highlight
3. Make a Button drawable object
- Move your drawing code into a Drawable Button object
- Parameterize the button’s position, size, and text (props in constructor)
- Add a boolean property called “hover” to change how the button is drawn
Web Apps 37
