JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="400" height="400"></canvas>

JavaScript

var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

var width = canvas.width;
var height = canvas.height;

var gradient = context.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(0.25, "rgba(0,0,0,1)");
gradient.addColorStop(0.75, "rgba(0,0,0,0)");

context.fillStyle = gradient;
context.fillRect(0, 0, width, height);

//draw image
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var pixelArray = imageData.data;
var length = pixelArray.length / 4; // 4 component - red, green, blue and alpha

for (var i = 0; i < length; i++) {
  var index = 4 * i;

  var r = pixelArray[index];
  var g = pixelArray[++index];
  var b = pixelArray[++index];
  var a = pixelArray[++index];
}

function line(x0, y0, x1, y1) {
  var dx = Math.abs(x1 - x0);
  var dy = Math.abs(y1 - y0);
  var sx = (x0 < x1) ? 1 : -1;
  var sy = (y0 < y1) ? 1 : -1;
  var err = dx - dy;

  while (x0 != x1 || y0 != y1) {

    var pixeldata = context.getImageData(x0, y0, 1, 1);
    var data = pixeldata.data;   
    for (var i = 0, n = data.length; i < n; i += 4) {
      if (data[i + 3] < 255) {
        console.log(true); //true 
        break;
      }
      console.log(data[i + 3]);
    }

    var e2 = 2 * err;
    if (e2 > -dy) {
      err -= dy;
      x0 += sx;
    }
    if (e2 < dx) {
      err += dx;
      y0 += sy;
    }
  }
}

line(1, 1, 5, 5); 
line(210, 210, 215, 215);