JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="plotcanvas" width="200" height="200"></canvas>

JavaScript

const canvas = document.getElementById('plotcanvas');
const context = canvas.getContext('2d');
context.translate(100, 100);
function set_pixel(x, y, color) {
	// using fillRect instead of native pixel access for simplicity
	context.fillStyle = 'rgb(' + color[0] + ',' + color[1] + ',' + color[3] + ')';
  context.fillRect(x, y, 1, 1);
}

function clear_screen() {
	context.fillStyle = 'white';
  context.fillRect(0, 0, 200, 200);
}

function createXRotationMatrix(angle) {
	return [
  	[1, 0, 0, 0],
    [0, Math.cos(angle), Math.sin(angle), 0],
    [0, -Math.sin(angle), Math.cos(angle), 0],
    [0, 0, 0, 1]
  ]
}
function createYRotationMatrix(angle) {
	return [
    [Math.cos(angle), 0, -Math.sin(angle), 0],
  	[0, 1, 0, 0],
    [Math.sin(angle), 0, Math.cos(angle), 0],
    [0, 0, 0, 1]
  ]
}
function multiplyMatrix(a, b) {
	const c = [[],[],[],[]];
  for (let x = 0; x < 4; x++) {
  	for (let y = 0; y < 4; y++) {
    	let acc = 0;
    	for (let n = 0; n < 4; n++) {
      	acc += a[n][x] * b[y][n];
      }
      c[y][x] = acc;
    }
  }
  return c;
}

function multiplyPointByMatrix(matrix, point) {
	return [
  (point[0] * matrix[0][0]) + (point[1] * matrix[0][1]) + (point[2] * matrix[0][2]) + (1 * matrix[0][3]),
  (point[1] * matrix[1][0]) + (point[1] * matrix[1][1]) + (point[2] * matrix[1][2]) + (1 * matrix[1][3]),
  (point[2] * matrix[2][0]) + (point[1] * matrix[2][1]) + (point[2] * matrix[2][2]) + (1 * matrix[2][3])
  ]
}

var xRotation = createXRotationMatrix(0.4);
var yRotation = createYRotationMatrix(0.4);
var transform = multiplyMatrix(xRotation, yRotation);
context.strokeStyle = 'black';
function lerp(a, b, t) {
	return [
  	(b[0] - a[0]) * t + a[0],
  	(b[1] - a[1]) * t + a[1],
  ]
}
function drawTransformedLine(a, b) {
	var ta = multiplyPointByMatrix(transform, a);
	var tb = multiplyPointByMatrix(transform, b);
  var dx = ta[0] - tb[0];
  var dy = ta[1] - tb[1];
  var d = Math.sqrt(dx * dx + dy * dy);
  for (let i = 0; i <= d; i++) {
  	var interpolated =...