<!DOCTYPE html>
<style>
canvas {
  background-color: gray;
  width: 100px;
  height: 100px;
  object-fit: contain;
}
</style>
<p>Test passes if a green square inside a gray square is shown without distortion.</p>
<div>
  <canvas width="50" height="100"></canvas>
</div>
<script>
function paintCanvas(canvas)
{
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(10, 35, 30, 30);
}

paintCanvas(document.querySelector('canvas'));
</script>