Advise please: Small pen on a large canvas - user-interface

Question

I'm currently drawing a line chart on a html5 canvas (In plan vanilla JavaScript) with a width of 1px and moving along as I draw on the x axis 2px spacing per data point. Currently my canvas size is 1000px by 300px.
My data is most of the time much larger than my canvas. I need some idea of a smart approach to zooming (or to make it seem like you are zooming) as I would like to be able to zoom and drag the view-able area around without loosing the crispness of the 1px line.
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.
Would it be more practical to change (increase/decrease) the x spacing and the magnitude of the the y movements when drawing? So that this way If zoomed out far, I would be drawing still with 1px thickness and still drawing on the same size canvas but moving much more fin-eight distances. This way I would have to repaint I think every time I navigate the area and if altering zoom. Also the canvas would not need to be zoomed with css.
Or would It be better to Increase the size of the canvas to a much much larger one and change the thickness of the line with each zoom? So this way when you are zoomed out the line thickness would be greater than if you were zoomed in but the distance and spacing between movements would always be the same no matter what level the zoom was. Also this way I assume I would have to repaint only when zooming the canvas element with css to change line width whereas scrolling the drawing would be fine as the whole drawing would all-ways fit into the large canvas.
I have heard that there are limitations on size and rendering on different browsers for a start and I would like to know If anyone has had any experience in dealing with large canvas drawings.
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).
What would be the most 'do-able' way and would there be a more logical approach to this task?
Please no library's.

Answer 1

You can keep your crisp fine lines when zooming by setting the canvas CSS size much smaller than the canvas element size.
Example:
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>