请指教：大笔小笔canvas
Advise please: Small pen on a large canvas
我目前正在 html5 canvas（计划中的 vanilla JavaScript）上绘制宽度为 1px 的折线图，并随着我在 x 轴上绘制每个数据 2px 间距而移动观点。目前我的 canvas 大小是 1000px x 300px。
我的数据大部分时间都比我的 canvas 大得多。我需要一些聪明的缩放方法的想法（或者让它看起来像你正在缩放）因为我希望能够缩放和拖动可视区域而不失去 1px 线的清晰度。
A note: The canvas could be a drawing of cat for all it matters, for the sake of a clear question if it was a cat then the cat would be much larger than the canvas and you might, as a user, be interested at looking closely at its foot and scrolling around or zooming out to see the whole cat. The real problem I see is the fact that it is a line drawing of 1px thickness.
绘制时更改(increase/decrease) x 间距和y 移动幅度是否更实用？这样一来，如果缩小到很远，我将仍然以 1px 的厚度进行绘制，并且仍然以相同的大小 canvas 进行绘制，但会移动更多的 fin-8 距离。这样我就不得不重新绘制我想每次我浏览该区域时以及如果改变缩放比例。 canvas 也不需要用 css 缩放。
或者将 canvas 的大小增加到更大的大小并在每次缩放时更改线条的粗细会更好吗？因此，当您缩小时，线条粗细会比放大时更大，但无论缩放级别如何，移动之间的距离和间距始终相同。同样，通过这种方式，我假设只有在使用 css 缩放 canvas 元素以更改线宽时才需要重新绘制，而滚动绘图会很好，因为整个绘图将始终适合大 canvas.
我听说一开始在不同浏览器上的尺寸和渲染有限制，我想知道是否有人有处理大型 canvas 图纸的经验。
For further detail: My data points are around 70,000 long I will be increasing to 100,000 data points so the canvas would be quite big, hence my concern (it is a static chart so no worries about stalling the browser with such a large task).
什么是最 'do-able' 的方法，是否有更合乎逻辑的方法来完成这项任务？
请不要图书馆的。
通过将 canvas CSS 尺寸设置为比 canvas 元素尺寸小得多，您可以在缩放时保持清晰的细线。
示例：
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
// draw on standard canvas
ctx1.beginPath();
ctx1.moveTo(50/4,50/4);
ctx1.lineTo(250/4,250/4);
ctx1.stroke();
// draw on resolution enhanced canvas
ctx.lineWidth=4;
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(250,250);
ctx.stroke();
#canvas{border:1px solid red; width:100px; height:100px;}
#canvas1{border:1px solid blue; width:100px; height:100px;}
<h4>Left: Standard canvas, Right: Resolution enhanced</h4>
<h4>Zoom your browser to notice the difference (eg 200%)</h4>
<canvas id="canvas1" width=100 height=100></canvas>
<canvas id="canvas" width=400 height=400></canvas>
我目前正在 html5 canvas（计划中的 vanilla JavaScript）上绘制宽度为 1px 的折线图，并随着我在 x 轴上绘制每个数据 2px 间距而移动观点。目前我的 canvas 大小是 1000px x 300px。
我的数据大部分时间都比我的 canvas 大得多。我需要一些聪明的缩放方法的想法（或者让它看起来像你正在缩放）因为我希望能够缩放和拖动可视区域而不失去 1px 线的清晰度。
A note: The canvas could be a drawing of cat for all it matters, for the sake of a clear question if it was a cat then the cat would be much larger than the canvas and you might, as a user, be interested at looking closely at its foot and scrolling around or zooming out to see the whole cat. The real problem I see is the fact that it is a line drawing of 1px thickness.
绘制时更改(increase/decrease) x 间距和y 移动幅度是否更实用？这样一来，如果缩小到很远，我将仍然以 1px 的厚度进行绘制，并且仍然以相同的大小 canvas 进行绘制，但会移动更多的 fin-8 距离。这样我就不得不重新绘制我想每次我浏览该区域时以及如果改变缩放比例。 canvas 也不需要用 css 缩放。
或者将 canvas 的大小增加到更大的大小并在每次缩放时更改线条的粗细会更好吗？因此，当您缩小时，线条粗细会比放大时更大，但无论缩放级别如何，移动之间的距离和间距始终相同。同样，通过这种方式，我假设只有在使用 css 缩放 canvas 元素以更改线宽时才需要重新绘制，而滚动绘图会很好，因为整个绘图将始终适合大 canvas.
我听说一开始在不同浏览器上的尺寸和渲染有限制，我想知道是否有人有处理大型 canvas 图纸的经验。
For further detail: My data points are around 70,000 long I will be increasing to 100,000 data points so the canvas would be quite big, hence my concern (it is a static chart so no worries about stalling the browser with such a large task).
什么是最 'do-able' 的方法，是否有更合乎逻辑的方法来完成这项任务？
请不要图书馆的。
通过将 canvas CSS 尺寸设置为比 canvas 元素尺寸小得多，您可以在缩放时保持清晰的细线。
示例：
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
// draw on standard canvas
ctx1.beginPath();
ctx1.moveTo(50/4,50/4);
ctx1.lineTo(250/4,250/4);
ctx1.stroke();
// draw on resolution enhanced canvas
ctx.lineWidth=4;
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(250,250);
ctx.stroke();
#canvas{border:1px solid red; width:100px; height:100px;}
#canvas1{border:1px solid blue; width:100px; height:100px;}
<h4>Left: Standard canvas, Right: Resolution enhanced</h4>
<h4>Zoom your browser to notice the difference (eg 200%)</h4>
<canvas id="canvas1" width=100 height=100></canvas>
<canvas id="canvas" width=400 height=400></canvas>