JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

<canvas id="c" width="500" height="500"></canvas>

JavaScript

var c = document.getElementById('c'),
    ctx = c.getContext('2d');

drawLine(220, 10, 50, 300);

function drawLine(x1, y1, x2, y2) {
    var dx = Math.abs(x2 - x1),
        dy = Math.abs(y2 - y1),
        cx = (x1 < x2) ? 1 : -1,
        cy = (y1 < y2) ? 1 : -1,
        error = dx - dy,
        doubledError;
    
    while (x1 !== x2 || y1 !== y2) {
        drawPoint(x1, y1);
        doubledError = error + error;
        if (doubledError > -dy) {
            error -= dy;
            x1 += cx;
        }
        if (doubledError < dx) {
            error += dx;
            y1 += cy;
        }
    }
}

function drawPoint(x, y) {
    ctx.fillRect(x, y, 1, 1);
}