Lecture #02

2D Graphics
Computer Graphics
Winter term 2019/20

Marc Stamminger
Rendering
• “Rendering”:
• fill frame buffer with shapes, text, 3D-content, …

• Examples:
• render a rectangle → simple
• render a circle with radius 𝑟𝑟 and center (𝑥𝑥, 𝑦𝑦) → ???
• render a line from 𝑥𝑥1 , 𝑦𝑦1 to (𝑥𝑥2 , 𝑦𝑦2 ) → ???
• fill a triangle with vertices 𝑥𝑥1 , 𝑦𝑦1 , 𝑥𝑥2 , 𝑦𝑦2 , 𝑥𝑥3 , 𝑦𝑦3 → ???
• → next week “Rasterization”

Computer Graphics 2019/20 - 2D Graphics 2

Rendering
• Frame buffer is usually not written directly, but via a Graphics API

• Today we will have a brief look into such APIs, but this is not the
general topic of this lecture

• Mostly, we learn about the algorithms for rendering

• In the exercises, we will also look at the graphics APIs

Computer Graphics 2019/20 - 2D Graphics 3

Rendering
• Command-based APIs:
• a library containing functions that render primitives, such as lines,
rectangles, circles or similar
• oftentimes, this includes the interaction with the GPU (a special device on
the computer that is solely responsible for rendering)

• Scenegraph-based APIs:
• the scene to be rendered is defined in an abstract manner in a hierarchical
(tree-like) structure, which is passed to the renderer as a whole
• In HTML, this can be integrated into the normal document hierarchy
(see later)

• 3D:
• the primitives to be rendered are defined in 3D-space. A virtual camera is to
be specified that defines the mapping of the 3D-world to the 2D image. Also
occlusion must be considered.
Computer Graphics 2019/20 - 2D Graphics 4
Rendering APIs
looked at in the
exercises

2D 3D
command based • JAVA graphics 2D • OpenGL
• HTML canvas • DirectX
• Postscript • …
• …
scenegraph based • SVG • X3D
• … • Unreal
• Unity

today: 2D 3D comes soon

Computer Graphics 2019/20 - 2D Graphics 5

Today: 2D Graphics APIs
• We look into graphics APIs provided by HTML
• HTML-elements that can be filled with 2D graphics:

• Canvas Element
• Command-based API

• SVG Element
• Scenegraph-based API

Computer Graphics 2019/20 - 2D Graphics 6

HTML5 Canvas
• Command-based Graphics API
• Context object: accepts graphics commands that draw into this
canvas, e.g.
<canvas id=“canvas” width=200 height=200 />
<script>
var context = canvas.getContext(“2d”);
context.clearRect(0,0,512,512);
context.fillStyle = “#00ff00”;
context.fillRect(100,100,300,300);
</script>

• for more information see:

https://developer.mozilla.org/de/docs/Web/Guide/HTML/Canvas_Tutorial

Computer Graphics 2019/20 - 2D Graphics 7

HTML5 Canvas
• Examples

Computer Graphics 2019/20 - 2D Graphics 8

HTML5 SVG (Scalable Vector Graphics)
• Scene Graph based Graphics APIs
• can contain graphical objects as children, e.g.:

<svg width=200 height=200>

<circle cx=100 cy=100 r=50 />
<rect x=0 y=0 width=100 height=100 />
</svg>

• for more information see:

https://developer.mozilla.org/de/docs/Web/SVG

Computer Graphics 2019/20 - 2D Graphics 9

HTML5 SVG (Scalable Vector Graphics)
• Examples:

Computer Graphics 2019/20 - 2D Graphics 10

2D Graphics - Basics
• Primitives: Objects, from which an image is generated
• Attributes describe, how primitives are to be rendered (color, line
width, …)
• Transformations are used to describe how objects are positioned
within an image

• We start with the canvas element and its command-based API…

• … and then look into scene graphs

Computer Graphics 2019/20 - 2D Graphics 11

Primitives
• Graphics are composed of primitives such as
• lines
• rectangles
• circles / ellipses
• triangles
• polygons
• curves
• paths
• Each primitive has attributes such as
• fill color
• boundary color
• line / boundary width
• stipple pattern
• …

Computer Graphics 2019/20 - 2D Graphics 12

Primitives - Paths
• A path is a set of (joined) lines

var context = canvas1.getContext("2d");

context.clearRect(0,0,512,512);
context.beginPath();
context.moveTo(100,100);
context.lineTo(400,200);
context.lineTo(200,300);
context.lineTo(400,400);
context.stroke();

• Rendering line paths → next lecture

Computer Graphics 2019/20 - 2D Graphics 13

Primitives - Paths
• Paths can also contain circular (or elliptical) arcs

var ctx = canvas2.getContext("2d");

ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();

Computer Graphics 2019/20 - 2D Graphics 14

Primitives - Paths
• Paths can also contain Bezier curves

ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();

• Bezier curves, conversion to line paths

→ lecture “Geometric Modeling”

Computer Graphics 2019/20 - 2D Graphics 15

Attributes
• Mathematically, a line has zero width
→ invisible
• To render a line, we have to define a line width
→ usually “one pixel”
• Additional line attributes:
• color
• line caps (shape of line ends)
• line dash (stipple patterns)

• → for more information see https://developer.mozilla.org/en-

US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

Computer Graphics 2019/20 - 2D Graphics 16

Primitives – Filled Paths
• A path can also be filled (algorithm see next but one lecture)

ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);

ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
ctx.stroke();

ctx.fillStyle = “#808080";
ctx.fill();

Computer Graphics 2019/20 - 2D Graphics 17

2D Transformations
• rotate around a given point

ctx.fillStyle = “#80ff80”;
ctx.fillRect(100,100,300,300);

// rotate around image center (256,256)

ctx.translate(256,256);
ctx.rotate(Math.PI/4);
ctx.translate(-256,-256);

ctx.fillStyle = “#ff8080”;
ctx.fillRect(100,100,300,300);

Computer Graphics 2019/20 - 2D Graphics 18

Affine Transformations
• Translate, rotate, and scale are affine transformations

• Important in CG
• Positioning objects in a scene
• Object Animations
• Changing the shape of objects
• Creation of multiple copies of objects

• Can be described easily using Homogeneous Coordinates and

Matrices

Computer Graphics 2019/20 - 2D Graphics 19

Affine Transformations
• Coordinate Frames
• Origin 𝑂𝑂 (point)
• Coordinate axes 𝑒𝑒1 , 𝑒𝑒2 (vectors)
𝑒𝑒2

• Standard coordinate frame

𝑂𝑂 𝑒𝑒1
• 𝑂𝑂 = 0,0
• 𝑒𝑒1 = 1,0 , 𝑒𝑒2 = (0,1)

Computer Graphics 2019/20 - 2D Graphics 20

Affine Transformations
• Coordinate system change:

𝑓𝑓(𝑥𝑥, 𝑦𝑦) = 𝑂𝑂 + 𝑥𝑥𝑒𝑒1 + 𝑦𝑦𝑒𝑒2

𝑒𝑒2
𝑒𝑒1

𝑂𝑂

Computer Graphics 2019/20 - 2D Graphics 21

Affine Transformations
• We call such mappings Affine Mappings:
𝑥𝑥 𝑂𝑂1
𝑒𝑒
𝑥𝑥, 𝑦𝑦 → 1 𝑒𝑒2
𝑦𝑦 + 𝑂𝑂2
• more generally:
𝑥𝑥 → 𝐴𝐴𝐴𝐴 + 𝑡𝑡 (𝐴𝐴 ∈ ℝ2×2 , 𝑡𝑡 ∈ ℝ2 )

• concatenation results in another affine mapping:

𝑥𝑥 ′ = 𝐴𝐴1 𝑥𝑥 + 𝑡𝑡1
𝑥𝑥 ′′ = 𝐴𝐴2 𝑥𝑥 ′ + 𝑡𝑡2 = 𝐴𝐴2 𝐴𝐴1 𝑥𝑥 + 𝑡𝑡1 + 𝑡𝑡2 = 𝐴𝐴2 𝐴𝐴1 𝑥𝑥 + 𝐴𝐴2 𝑡𝑡1 + 𝑡𝑡2
𝐴𝐴𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐 𝑡𝑡𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐
• we can apply a simple trick that allows us to also express affine
transformations by a single matrix

→ homogeneous coordinates
Computer Graphics 2019/20 - 2D Graphics 22
Homogenous coordinates
• Add “1” as third homogeneous coordinate

x = (𝑥𝑥1 , x2 ) → (𝑥𝑥1 , x2 , 1)

• To compute the mapping 𝐴𝐴𝐴𝐴 + 𝑡𝑡 we apply a matrix of the form

𝐴𝐴11 𝐴𝐴12 𝑡𝑡1
𝐴𝐴21 𝐴𝐴22 𝑡𝑡2
0 0 1

𝑥𝑥1 𝐴𝐴11 𝐴𝐴12 𝑡𝑡1 𝑥𝑥1

• 𝑥𝑥2 → 𝐴𝐴21 𝐴𝐴22 𝑡𝑡2 𝑥𝑥2 = 𝐴𝐴𝑥𝑥 + 𝑡𝑡
1 1 1
0 0 1

Computer Graphics 2019/20 - 2D Graphics 23

Homogenous coordinates
• If the last row of 𝐴𝐴 is 0,0,1 the mapping is affine
→ later we see how we can also use this row to express more
general transformation

• Structure of a general affine transformation in homogeneous

coordinates basis vectors after transf.
translation

linear 𝑒𝑒1,𝑥𝑥 𝑒𝑒2,𝑥𝑥 𝑡𝑡𝑥𝑥

part 𝑒𝑒1,𝑦𝑦 , 𝑒𝑒2,𝑦𝑦 𝑡𝑡𝑦𝑦

0 0 1 0 0 1

Computer Graphics 2019/20 - 2D Graphics 24

Homogenous coordinates
• Transformation Rules & Matrix Operations

Multiplication ≡ composition
𝑇𝑇 𝑆𝑆 𝑆𝑆𝑇𝑇
𝑥𝑥 → 𝑇𝑇𝑇𝑇 = 𝑦𝑦 → 𝑆𝑆𝑆𝑆 = 𝑧𝑧 ≡ 𝑥𝑥 𝑆𝑆𝑆𝑆𝑆𝑆 = 𝑧𝑧

Inverse matrix ≡ Inverse transformation

• Note order of multiplication: 𝑆𝑆𝑆𝑆 means: first 𝑇𝑇, then 𝑆𝑆

Computer Graphics 2019/20 - 2D Graphics 25

Affine Transformations
• Special cases
• Translations

• Rotations

• Scalings

Computer Graphics 2019/20 - 2D Graphics 26

Affine Transformations
• Special cases
• Shearings

• Reflections

Computer Graphics 2019/20 - 2D Graphics 27

Affine Transformations
• Classes of Affine Transformations
• Rigid
• Similarity
• Linear

Computer Graphics 2019/20 - 2D Graphics 28

Affine Transformations
• Rigid Transformation (Euclidean Transform)
• Preserves distances
• Preserves angles

Rigid / Euclidean

Identity
Translation
Rotation

Computer Graphics 2019/20 - 2D Graphics 29

Affine Transformations
• Rigid transformation:
𝑒𝑒1 and 𝑒𝑒2 are orthonormal and have unit length
• 𝑥𝑥 → 𝐴𝐴𝐴𝐴 + 𝑡𝑡 with 𝐴𝐴 orthogonal and det(𝐴𝐴) > 0
• Application of multiple rigid transformations is a rigid
transformation again (also true for following classes)

• If det(𝐴𝐴) < 0, 𝐴𝐴 contains a reflection, which is not rigid

Computer Graphics 2019/20 - 2D Graphics 30

Affine Transformations
• Similarity Transforms
• Preserves angles, but changes distances
• Rigid + (isotropic) scaling + reflection

𝑥𝑥 → 𝑐𝑐𝑐𝑐𝑐𝑐 + 𝑡𝑡 with 𝑐𝑐 ∈ ℝ and 𝐴𝐴 orthonormal

Similarity

Rigid / Euclidean

Identity Isotropic Scaling

Translation
Rotation

Computer Graphics 2019/20 - 2D Graphics 31

Affine Transformations
• General Linear Transformations = affine without translation
• Origin (0,0) is always mapped to origin

Similarities
Linear
Rigid / Euclidean
Scaling
Identity
Translation Isotropic Scaling Reflection
Rotation
Shear
Computer Graphics 2019/20 - 2D Graphics 32
Scaling
• Examples

0.5 0 0
0 0.5 0
0 0 1

0.5 0 0
0 1.5 0
0 0 1

Computer Graphics 2019/20 - 2D Graphics 33

Shearing
• Shearing
• Pushing things sideways (compare deck of cards)
𝑠𝑠
𝑒𝑒2 =
1
• Horizontal ( y-coordinate will not change )
1 𝑠𝑠 0
𝑠𝑠𝑠𝑠𝑠𝑠𝑠𝑟𝑟𝑥𝑥 𝑠𝑠 = 0 1 0 𝑂𝑂 1
𝑒𝑒1 =
0 0 1 0

0
𝑒𝑒2 =
• Vertical ( x-coordinate will not change ) 1
1 0 0
𝑠𝑠𝑠𝑠𝑠𝑠𝑠𝑟𝑟𝑦𝑦 𝑠𝑠 = 𝑠𝑠 1 0
0 0 1 𝑂𝑂 1
𝑒𝑒1 =
𝑠𝑠

Computer Graphics 2019/20 - 2D Graphics 34

Shearing
• Examples
• Horizontal shear: vertical lines → 45°to the right
1 0.5 0
0 1 0
0 0 1

• Vertical shear: horizontal lines → 45°to the top

1 0 0
0.5 1 0
0 0 1

Computer Graphics 2019/20 - 2D Graphics 35

Simple Rotation in 2D
• Rotation
• Vector 𝒂𝒂 = (𝑎𝑎𝑥𝑥 , 𝑎𝑎𝑦𝑦 ), angle 𝛼𝛼 with 𝑥𝑥-axis
• Length 𝑟𝑟 = 𝑎𝑎𝑥𝑥2 + 𝑎𝑎𝑦𝑦2
• By definition: 𝑎𝑎𝑥𝑥 = 𝑟𝑟 cos 𝛼𝛼,
𝑎𝑎𝑦𝑦 = 𝑟𝑟 sin 𝛼𝛼
• Rotation by an angle φ counter-clockwise:
𝑏𝑏𝑥𝑥 = 𝑟𝑟 cos 𝛼𝛼 + 𝜙𝜙 = 𝑟𝑟 cos 𝛼𝛼 cos 𝜙𝜙 – 𝑟𝑟 sin 𝛼𝛼 sin 𝜙𝜙
𝑏𝑏𝑦𝑦 = 𝑟𝑟 sin(𝛼𝛼 + 𝜙𝜙) = 𝑟𝑟 sin 𝛼𝛼 cos 𝜙𝜙 + 𝑟𝑟 cos 𝛼𝛼 sin 𝜙𝜙
y

b a

φ
α
x

Computer Graphics 2019/20 - 2D Graphics 36

Simple Rotation in 2D
• After substitution
• 𝑏𝑏𝑥𝑥 = 𝑎𝑎𝑥𝑥 cos 𝜙𝜙 − 𝑎𝑎𝑦𝑦 sin 𝜙𝜙
• 𝑏𝑏𝑦𝑦 = 𝑎𝑎y cos𝜙𝜙 + 𝑎𝑎𝑥𝑥 sin 𝜙𝜙

• Matrix form taking 𝑎𝑎 to 𝑏𝑏

cos𝜙𝜙 − sin 𝜙𝜙 0
𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟 𝜙𝜙 = sin 𝜙𝜙 cos 𝜙𝜙 0
0 0 1

−𝑠𝑠𝑠𝑠𝑠𝑠𝑠𝑠
𝑒𝑒2 =
𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐 cos 𝜙𝜙
𝑒𝑒1 =
sin 𝜙𝜙
𝑂𝑂

Computer Graphics 2019/20 - 2D Graphics 37

Simple Rotation in 2D
• Rotation by 45°counter-clockwise
2 2
− 0
2 2
2 2
0
2 2
0 0 1

• Rotation by 30° clockwise 3 1

0
2 2
1 3
− 0
2 2
0 0 1

Computer Graphics 2019/20 - 2D Graphics 38

Reflection
• Reflection
• Reflect a vector across either of the coordinate axes
• Determinant of a reflection is negative
• About 𝑥𝑥-axis (multiply 𝑦𝑦 by -1):

1 0 0
0 −1 0
0 0 1

Computer Graphics 2019/20 - 2D Graphics 39

Reflection
• Across y-axis (multiply x coordinates by -1)

−1 0 0
0 1 0
0 0 1

Computer Graphics 2019/20 - 2D Graphics 40

Linear Transformations
• Compositing of 2D transformations
• First 𝑣𝑣2 = 𝑆𝑆𝑣𝑣1 then 𝑣𝑣3 = 𝑅𝑅𝑣𝑣2
• Equivalently 𝑣𝑣3 = 𝑅𝑅 𝑆𝑆𝑣𝑣1 = 𝑅𝑅𝑅𝑅 𝑣𝑣1

1 0 0
0 0.5 0
0 0 1

2 2 2 2
− 0 − 0
2 4 2 2
2 2 2 2
0 0
2 4 2 2
0 0 1 0 0 1

Computer Graphics 2019/20 - 2D Graphics 41

Linear Transformations
• Matrix multiplications are associative:

𝑅𝑅𝑅𝑅 𝑇𝑇 = 𝑅𝑅 𝑆𝑆𝑆𝑆 → 𝑣𝑣3 = 𝑅𝑅𝑅𝑅 𝑣𝑣1 = 𝑀𝑀𝑣𝑣1 with 𝑀𝑀 = 𝑅𝑅𝑅𝑅

• Matrix multiplications are not commutative

• The order of transformations does matter !!!
• Note the difference
• Scaling then rotating
• Rotating then scaling

Computer Graphics 2019/20 - 2D Graphics 42

Linear Transformations
• Note that the order of transformations is important

Scale Rotate

Rotate Scale

Computer Graphics 2019/20 - 2D Graphics 43

Linear Transformations
• Decomposition of transformations
• Write some transformation 𝑀𝑀 as the product of certain classes of matrices

• In 2D: Decomposition of any linear 2D transform into product:

rotation → scale → rotation = 𝑅𝑅2 𝑆𝑆𝑅𝑅1
• From existence of singular value decomposition (SVD)
(Singulärwertzerlegung, Ausgleichsprobleme)
• Note that the scale can have negative entries

Computer Graphics 2019/20 - 2D Graphics 44

Linear Transformations
• Example: shearing
• 𝜎𝜎𝑖𝑖 singular values, 𝑅𝑅1 and 𝑅𝑅2 rotations
1 1 𝜎𝜎 0
= 𝑅𝑅2 1 𝑅𝑅
0 1 0 𝜎𝜎2 1
0.851 −0.526 1.618 0 0.526 0.851
=
0.526 0.851 0 0.618 −0.851 0.526

R1 SR1 R2SR1

Computer Graphics 2019/20 - 2D Graphics 45

Linear Transformations
• Matrix decomposition: represent rotations with shears
cos 𝜙𝜙 − 1 cos 𝜙𝜙 − 1
cos 𝜙𝜙 −sin 𝜙𝜙 1 1 0 1
= sin 𝜙𝜙 sin 𝜙𝜙
sin 𝜙𝜙 cos 𝜙𝜙 sin 𝜙𝜙 1
0 1 0 1

• Useful for raster rotation

• Very efficient raster operation for images: only column-wise and row-wise
operations!
• Introduces some jaggies but no holes

Computer Graphics 2019/20 - 2D Graphics 46

Linear Transformations
1 0
= 𝑆𝑆3 𝑆𝑆2 𝑆𝑆1 = 1 1 − 2 1 1− 2
𝜋𝜋
• 𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟 2
4 0 1 1 0 1
2

S1 S2S1 S3S2S1

Computer Graphics 2019/20 - 2D Graphics 47

Linear Transformations
• Images – simple raster rotation
• Take raster position (𝑖𝑖, 𝑗𝑗) and apply horizontal shear

1 𝑠𝑠 𝑖𝑖 𝑖𝑖 + 𝑠𝑠𝑠𝑠
=
0 1 𝑗𝑗 𝑗𝑗

• Round 𝑠𝑠𝑠𝑠 to nearest integer: in every row a constant shift

• Move each row sideways by a different amount
• Resulting image has no gaps

Computer Graphics 2019/20 - 2D Graphics 48

Example
• Affine Transformations with the HTML Canvas

Computer Graphics 2019/20 - 2D Graphics 49

Scene Graph based Graphics APIs
• HTML5-Element SVG (Scalable Vector Graphics)
• can contain graphical objects as children, e.g.:

<svg width=200 height=200>

<circle cx=100 cy=100 r=50 />
<rect x=0 y=0 width=100 height=100 />
</svg>

• for more information see:

https://developer.mozilla.org/de/docs/Web/SVG

Computer Graphics 2019/20 - 2D Graphics 50

Scene Graph based Graphics APIs
• Examples:

Computer Graphics 2019/20 - 2D Graphics 51

SVG Groups
• SVG allows us to group nodes using a group node
• allows us to apply transformations or attributes to entire groups

Computer Graphics 2019/20 - 2D Graphics 52

Scene Graph
• Such a hierarchy is a tree, right? Why then “Scene Graph”?
→ group nodes can be referenced multiple times
→ graph instead of tree → “instancing”

<svg id="svg">
<defs>
<g id="prim">
<rect width="20" height="20“ />
</g>
</defs>
<g fill="green">
<use xlink:href="#prim" x="50" y="50” />
<use xlink:href="#prim" x="150" y="50“ />
</g>
<g fill="red">
<use xlink:href="#prim" x="50" y="150“ />
<use xlink:href="#prim" x="150" y="150“ />
</g>
</svg>
Computer Graphics 2019/20 - 2D Graphics 53
Scene Graph
<svg id="svg">
<defs>…</defs>
svg <g fill="green">
<use xlink:href="#prim" x="50"
<use xlink:href="#prim" x="150
</g>
g fill=“green” g fill=“red” <g fill="red">
<use xlink:href="#prim" x="50"
<use xlink:href="#prim" x="150
x=50 x=150 x=50 x=150
y=50 y=50 y=150 y=150
</g>
</svg>

#prim

• We will come back to scene graphs later in the lecture

Computer Graphics 2019/20 - 2D Graphics 54

Next lectures …
• Rasterization of lines and Polygons

Computer Graphics 2019/20 - 2D Graphics 55