Untitled

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function line(ctx, a, b, c, d) {
        ctx.moveTo(a, b);
        ctx.lineTo(c, d);
        ctx.stroke();
    }

    function textme(...args) {
        for (let x of args) {
            span1.innerHTML += x + "<br />";
        }
    }

    document.addEventListener("DOMContentLoaded", event => {
        const ctx = canv1.getContext("2d");
        ctx.lineWidth = 1;
        const quantum = {x: 16, y: 9};

        for (let i = 0; i <= 12; i++) {
            line(ctx, 0, quantum.y*i, quantum.x*i, canv1.height);
        }
    });
</script>
</head>
<body>
    <canvas id="canv1" width="192" height="108" style="border:1px solid #000000;"></canvas>
    <br />
    <span id="span1"></span>
</body>
</html>