<!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>