Data Visualization · Exercise 5 of 5 Previous
Advanced
Timed: make the canvas sharp (10 minutes)
Interview-style task, about 10 minutes. The canvas is 400 by 120 CSS pixels, but its backing store is the default 300 by 150, so it is stretched and blurry.
Set the backing store to the CSS size times devicePixelRatio, scale the context once, and fill the whole box with fillRect(0, 0, 400, 120) in CSS pixels.
What Check tests
- The backing store is 400 CSS pixels times the ratio wide
- The backing store is 120 CSS pixels times the ratio high
- The bottom-right corner is filled
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.