JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id=before width=100 height=100></canvas>
<canvas id=after width=100 height=100></canvas>

CSS

canvas {
    background: #000;
    margin: 10px;
}

JavaScript

function render(canvas) {
    for (var i = 0; i <= 100; i += 2) {
        canvas.moveTo(i, 0)
        canvas.lineTo(i, 100)
    }

    for (var j = 0; j <= 100; j += 2) {
        canvas.moveTo(0, j)
        canvas.lineTo(100, j)
    }

    canvas.lineWidth = 2
    canvas.strokeStyle = "rgb(200,255,100)"
    canvas.stroke()
}

var before = document.getElementById("before").getContext("2d"),
    after = document.getElementById("after").getContext("2d")

render(before)

after.translate(0.5, 0.5)

render(after)