Template for issues

HTML

<div id="container">
<canvas id="c" width="1000" height="1000"></canvas>
</div>

CSS

#container {
  width: 400px;
  height: 200px;
  background-color:black;
}

#container canvas {
  object-fit:contain; /* If you remove this line, the bug does not happen! */
  object-position: center top;
  width:100%;
  height:100%;
}

canvas {
    border: 1px solid #999;
}

JavaScript

/*
Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=840075

Expected behavior upon clicking 'Run':
Diagonal line should be slowly drawn from upper-left corner to lower right corner. There should be no gaps, lag, or stopages when the line is being drawn. The performance should be quite smooth.

Actual behavior:
The line drawing stops for long periods of time (500ms or more) part way through or is missing many segments.

Notes:
The bug does not happen if you remove the css line "object-fit:contain".
The bug happens slightly differently on windows than it does on linux, but there are similar problems on both platforms.
The bug doesn't happen if Hardware Accelerated 2D Canvas is disabled in chrome://flags
The bug doesn't happen in FF.
*/

var c = document.getElementById("c");
var ctx = c.getContext('2d');
ctx.canvas.width=1000;
ctx.canvas.height=1000;
ctx.fillStyle = "white";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

var x=0, y=0;
ctx.strokeStyle="black";

var drawLineSegment = () => {
	if (x+1 > ctx.canvas.width) return;
  if (y+1 > ctx.canvas.height) return;

	ctx.beginPath();
	ctx.moveTo(x,y);
  x++;
  y++;
	ctx.lineTo(x,y)
	ctx.stroke();
  window.requestAnimationFrame(drawLineSegment)
};

drawLineSegment();