Html5 canvas issue on MacOS chrome

Question

I am trying to plot a scatter plot using HTML5 canvas. My scatter plot needs to have a lot of points. When I try to plot a large number of points let's say (7700000) points on a canvas it works on Firefox and Safari.

Very large number of points (JS fiddle)

But for some reason the canvas is blank on Google Chrome on MacOS. However it works on Google Chrome of Windows and Linux. If the number of points to be plotted are smaller, it works on MacOS but doesn't when the number of points is increased. I tried to search for the related issues but could not find any. Am I doing something wrong or is it the issue with Google Chrome for MacOS?

Small number of points (JS Fiddle)

I am using following function to plot on canvas:

function drawPoint(scaleX, scaleY, point, k) {
    context.beginPath();
    context.fillStyle = pointColor;
    const px = scaleX(point[0]);
    const py = scaleY(point[1]);
    const arc_width = width/1000;
    const arc_height = height/1000;
    // context.arc(px, py, arc_width * k, 0, 2 * Math.PI, true);
    context.strokeRect(px, py, arc_width * k, arc_height * k)
    context.stroke();
}

Answer 1

Using fill instead of stroke fixed my problem. I don't know the actual reason but when you are trying to plot large number of points on canvas, using fill is faster and solves this issue on chrome MacOS.