html - Why is a canvas line rendered below the initial page load have lower fidelity than those above?

Question

I am using paper.js to manage my html5 drawing. In Chrome if I reload at the bottom of the page and view this line, it is clear:

If I reloaded at the bottom, I can scroll up and back down, and the line will maintain its fidelity.

But if I reload at the top of the page and scroll down, the line looks jagged and not anti-aliased, like so:

Strangely, if I scroll up and down a few times after initially loading at the top of the page, the fidelity gets worse:

This happens in Safari as well, and in Firefox it happens but almost to an unnoticeable degree. My assumption is that this has something to do with the fact that when I load at the bottom, all of the dom elements above the load are rendered at page load. Whereas if I load at the top, the elements are only rendered when scrolled into view (and so are fighting with the scroll event and repaints for CPU?)

But is there anything I can do to make sure all dom events are rendered at page load? I am already wrapping the initial draw function in a $(document).ready.

Answer 1

看来这只是与性能有关（我还没有对其进行分析，所以我不确定 CPU 或内存是否是限制因素）。但是我可以简单地在 onFrame 循环中向 console.log 添加一个计算，尽管屏幕上没有 html5 启动的动画或重绘，但线条会出现锯齿状。

编辑：

真正的问题是向画布标签添加调整大小，例如：

<canvas resize></canvas>

将导致页面中某个点下的所有内容都被重新绘制。