Rendering Art on the Web - A Performance compendium

@rrafols
Rendered art on the
web
A performance compendium

@rrafols
Disclaimer
Content is my own experimentation and might
differ on other environments / systems or as soon
as there is a browser update.

@rrafols
Uses
• Game development
• Customized widgets
• Interactivity
• It’s fun & creative

@rrafols
• JS1k - https://js1k.com/
• Demoscene - https://en.wikipedia.org/wiki/Demoscene
• P01 - http://www.p01.org/about/
• JS13k games - https://js13kgames.com/
• Creative JS - http://creativejs.com/

@rrafols
Let’s build something simple to begin with……

@rrafols
Step 0 - Recursive tree
• Set up a <canvas>
• Initialize the rendering loop with requestAnimationFrame()

@rrafols
let a = document.getElementsByTagName('canvas')[0]
let c = a.getContext('2d')
let w = window.innerWidth
let h = window.innerHeight
render = ts => {
requestAnimationFrame(render)
}

@rrafols
• Clear the <canvas> on each iteration
• Draw the initial line

@rrafols
a.width = w
a.height = h
c.strokeStyle = '#fff'
c.beginPath()
c.moveTo(w/2, h)
c.lineTo(w/2, h - h/3)
c.stroke()

@rrafols
• Convert the drawing into a parametrized function
• Lines direction modified by an angle

@rrafols
split(w / 2, h, h / 3, Math.PI / 2)
split = (x, y, length, angle) => {
let x1 = x + length * Math.cos(angle)
let y1 = y - length * Math.sin(angle)
c.beginPath()
c.moveTo(x, y)
c.lineTo(x1, y1)
c.stroke()
}

@rrafols
• Call the split function recursively
• Modify the angle in each iteration to build the tree structure

@rrafols
c.beginPath()
c.moveTo(x, y)
c.lineTo(x1, y1)
c.stroke()
split(x1, y1, length/1.5, angle - Math.PI/4, it + 1)
split(x1, y1, length/1.5, angle + Math.PI/4, it + 1)

@rrafols
• Add more branches / bifurcations
• Increase max number of iterations
• Count the number of lines drawn so we can estimate drawing
complexity

@rrafols
lines++
…
…
c.fillStyle = '#fff'
c.fillText("lines: " + lines, w - 200, 20)

@rrafols
• Animate tree movement
• Recursively displace branches for intensified effect
• Apply alpha for smoother effect

@rrafols
c.globalAlpha = 0.2
let angle = Math.PI * Math.sin(ts * 0.0003)*0.15 +
Math.PI/2
split(w/2, h, h/3, angle, Math.cos(ts * 0.0004) *
Math.PI/8, 0)
c.globalAlpha = 1

@rrafols
• Increase maximum number of iterations and see what happens…

@rrafols
How can we measure performance?
Feels slower right?
To measure the frames per second we can do any of the following:
• Implement a simple frame counter
• Web Developer tools in Chrome & Firefox
• Available open source libraries such as stats.js
• https://github.com/mrdoob/stats.js/
• Use jsPerf to create test & run cases
• https://jsperf.com/

@rrafols
Using stats.js
1) Use npm to install it:
rrafols$ npm install stats.js
2) Include into the source file
<script src="node_modules/stats.js/build/stats.min.js"/>
3) Add it to the render function:

@rrafols
Adding stats.js
var stats = new Stats()
stats.showPanel(0)
document.body.appendChild( stats.dom )
…
render = ts => {
stats.begin()
…
stats.end()
}

@rrafols
Step 7 – Recursive tree
Now that we know it is slower, what we can do about it? How
can we optimize it?
• …

@rrafols
can we optimize it?
• Draw one single path with all the lines in it instead of several
paths with one single line.
• …

@rrafols
// c.beginPath()
c.moveTo(x, y)
c.lineTo(x1, y1)
// c.stroke()
…
c.beginPath()
let angle = Math.PI*Math.sin(ts * 0.0003)*0.15…
split(w/2, h, h/3, angle, Math.cos(ts * 0.0004)…
c.stroke()

@rrafols
can we optimize it?
• Draw one single path with all the lines in it instead of several
paths with one single line.
• Let’s increase the number of iterations to see how it behaves
now
• …

@rrafols
Performance Profiling

@rrafols
There might be a CPU bottleneck when calling recursively the
split function.
Let’s check if that is the issue…

@rrafols
Performance profiling
let path = new Path2D()
…
path.moveTo(x, y)
path.lineTo(x1, y1)
…
c.stroke(path)

@rrafols
There is an impact in the
frame rate by function calling
overhead, but rendering
seems to be the bottleneck

@rrafols
Let’s try something else

@rrafols
Grid
We have several ways of drawing a grid, let’s see some of
them:
• Using strokeRect directly on the context
• Adding rect to a path and stroking that path
• Generating a path with moveTo / lineTo instead of rect
• ...

@rrafols
Grid - strokeRect
for(let i = 0; i < h / GRID_SIZE; i++) {
for(let j = 0; j < w / GRID_SIZE; j++) {
let x = j * GRID_SIZE
let y = i * GRID_SIZE
c.strokeRect(x, y, GRID_SIZE, GRID_SIZE)
}
}

@rrafols
Grid – path & rect
…
path.rect(x, y, GRID_SIZE, GRID_SIZE)
}
}
…
c.stroke(path)

@rrafols
Grid – moveTo/lineTo
c.beginPath()
c.moveTo(x, y)
c.lineTo(x + GRID_SIZE, y)
c.lineTo(x + GRID_SIZE, y + GRID_SIZE)
c.lineTo(x, y + GRID_SIZE)
c.lineTo(x, y)
}
}
c.stroke()

@rrafols
Grid – moveTo/lineTo - path
path.moveTo(x, y)
path.lineTo(x + GRID_SIZE, y)
path.lineTo(x + GRID_SIZE, y + GRID_SIZE)
path.lineTo(x, y + GRID_SIZE)
path.lineTo(x, y)
}
}
c.stroke(path)

@rrafols
Grid – transformation
c.save()
c.translate(w / 2, h / 2)
c.rotate(angle)
c.translate(-w / 2, -h / 2)
…
c.restore()

@rrafols
//c.save()
c.translate(w / 2, h / 2)
c.rotate(angle)
c.translate(-w / 2, -h / 2)
…
//c.restore()
c.setTransform(1, 0, 0, 1, 0, 0)

@rrafols
rotate = (x, y, angle) => {
x -= w/2
y -= h/2
return [
x * Math.cos(angle) - y * Math.sin(angle) + w/2,
y * Math.cos(angle) + x * Math.sin(angle) + h/2
]
}

@rrafols
OKNOK
strokeRect
path.rect
path.lineT
o
c.lineTo

@rrafols
Grid
What about fill operations instead of stroke? Let’s fill the
rects to see the differences.

@rrafols
OK NOK
fillRect
path.rect
path.lineT
o
c.lineTo

@rrafols
Grid
What about images?
ImageAtlas vs single images
Images: https://toen.itch.io/toens-medieval-strategy

@rrafols
ImageAtlas – drawing & clipping
c.save()
c.beginPath()
c.rect(j * GRID_SIZE, i * GRID_SIZE, GRID_SIZE, GRID_SIZE)
c.clip()
c.drawImage(image, j * GRID_SIZE - 64, i * GRID_SIZE)

@rrafols
Grid – ImageAtlas vs single images

@rrafols
Grid – image smoothing
Browsers smooth images when drawing on decimal positions:
c.drawImage(image, 5.24, 10.23)

@rrafols
ImageAtlas – drawing on exact pixels
c.drawImage(imageLarge,
(w / 2 - imageLarge.naturalWidth / 2) |0,
(h / 2 - imageLarge.naturalHeight / 2) |0)

@rrafols
Images: https://dragosha.com/free/adventure-tileset.html

@rrafols
Conclusions
• Avoid allocating memory inside render loop – GC is “evil”!
• Group paths together rather than drawing multiple small paths
• Pre-calculate & store as much as possible
• Values & numbers
• Paths, Gradients, …
• Reduce render state machine changes
• Careful with canvas transformations
• Reset transformation with setTransform instead of save/restore.
• Always measure & profile. Check differences on several browsers.

@rrafols
Thank you
• More information:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
• Source code:
https://github.com/rrafols/html_canvas_performance
• Contact: https://www.linkedin.com/in/raimonrafols/

Rendering Art on the Web - A Performance compendium

Rendering Art on the Web - A Performance compendium

Recommended

More Related Content

What's hot

What's hot(20)

Similar to Rendering Art on the Web - A Performance compendium

Similar to Rendering Art on the Web - A Performance compendium(20)

More from Raimon Ràfols

More from Raimon Ràfols(12)

Recently uploaded

Recently uploaded(20)

Rendering Art on the Web - A Performance compendium