Engrain by ByteRush

WEB.20.02 Mid-level

Canvas 2D

Comes up in: Web fundamentals, Machine coding, Frontend system design

This concept is being written. It gets the full five steps — explanation, predict, interview angle, practice with tests, and review cards. Here is exactly what it will cover, so you can study it elsewhere in the meantime.

What it covers

  • immediate mode drawing
  • device pixel ratio for sharp output
  • animation loops with rAF
  • hit testing
  • OffscreenCanvas in workers
  • accessibility of canvas (fallback content)
  • WebGL/WebGPU awareness

Words you will know

canvasimmediate modedevice pixel ratioOffscreenCanvas

What you will practise

  • drawing app with undo

Interview questions this answers

  • Why does my canvas look blurry on high-DPI screens?