I'm perhaps a little of mark here, but writing some lines.
Twiddling with canvas a bit myself these days. From what I read in your question it all depends on your code. Loosely I take an approach like this:
- Detect available space.
- Pre-animation:
- Calculate as much as possible and save pre-calculated values to objects etc.
- Paint background, animation sprites and other objects to off DOM / memory canvas.
- During-animation:
- Use pre-calculated values to position and animate.
By this one outsource a lot of the calculations to only run on change in window size. If one does not have this in mind all the time while writing the code "What can I pre-calculate" one are in for a huge refactoring job.
I have fiddled with pixel ratio and PPI, in directions like this. I have however found the use of such functions like createHiDPICanvas()
to quickly mess up things like rotating and positioning. One issue, which by various information I have read on the subject, is that people does not factor in the fact that browsers also has a zoom factor. It can look OK when zoom is at 100% but when one zoom up/down it all falls apart. But then again you might find it useful.
There are various cases where one have to look out for what one do. Example:
If I draw horizontal and vertical lines, then align them to x0 + 0.5
or y0 + 0.5
to get crisp lines.
Ultimately it all comes down to how you do the final calculations during runtime. This slide might be of interest as an example.