JSFiddle - React, Tailwind, and code Playground

by alexvestin

JavaScript

const canvas = document.createElement("canvas")
canvas.width = 512;
canvas.height = 512;
canvas.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
const ctx = canvas.getContext("2d")
document.body.appendChild(canvas)

// let iterations_x = u32(max(0., (line.x - dtcx[1u - zones.x]) * f32(dir.x) + f32(TILE_SIZE))) >> 4u;


// {656,384}  {672.238,384.395}  {671.951,383.919}
// {656,384}  {672.238037109375,384.394683837891}  {671.951110839844,383.918884277344}

// {1024,400}  {1040.75,349.018188476562}  {1039.82592773438,431.548187255859}
const tile = [1024,400]
const p0 = [1040.75, 349.018188476562]
const p1 = [1039.82592773438, 431.548187255859]

const line = [p1[0] - p0[0], p1[1] - p0[1]]

const tl_x = (p0[0] >> 4) << 4
const tl_y = (p0[1] >> 4) << 4

const dtcx = [tl_x - p0[0]]
const it_x = Math.max(0.0, (line[0] - dtcx[0]) * -1 + 16) >> 4

console.log(it_x)

 


const cx = canvas.width / 2;
const cy = canvas.height / 2;

const tx = tile[0] + 16 / 2 
const ty = tile[1] + 16 / 2


const dx = cx - tx
const dy = cy - ty


const s = 29;
ctx.translate(tx, ty);
ctx.scale(s, s)
ctx.translate(-tx, -ty)
ctx.translate(dx / s, dy / s);

/* ctx.fillStyle = "green" */
/* ctx.fillRect(tl_x, tl_y, -it_x * 16, 16) */

ctx.fillStyle = "red"
ctx.fillRect(tile[0], tile[1], 16, 16);

ctx.strokeStyle = "blue"
ctx.lineWidth = 0.03;
ctx.beginPath()
ctx.moveTo(p0[0], p0[1])
ctx.lineTo(p1[0], p1[1])
ctx.stroke()