51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import { makeRgbLerpPic, threeDimCube } from "./lerppic";
|
|
|
|
const WIDTH = 800;
|
|
const HEIGHT = 600;
|
|
|
|
function main() {
|
|
const root = document.getElementById("root");
|
|
const canvas = document.createElement("canvas");
|
|
|
|
if (!root || !canvas) {
|
|
return;
|
|
}
|
|
|
|
root.appendChild(canvas);
|
|
|
|
const ctx = canvas.getContext("2d", { alpha: true });
|
|
if (!ctx) {
|
|
return;
|
|
}
|
|
|
|
root.style.resize = 'both';
|
|
root.style.overflow = 'hidden';
|
|
root.style.width = `${ WIDTH + 20 }px`;
|
|
root.style.height = `${ HEIGHT + 20 }px`;
|
|
canvas.style.padding = "10px";
|
|
|
|
function setCanvasDims(width: number, height: number) {
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
canvas.style.width = `${ width }px`;
|
|
canvas.style.height = `${ height }px`;
|
|
}
|
|
|
|
setCanvasDims(WIDTH - 20, HEIGHT - 20);
|
|
|
|
const observer = new ResizeObserver((el) => {
|
|
setCanvasDims(el[0].target.clientWidth - 20, el[0].target.clientHeight - 20);
|
|
});
|
|
observer.observe(root);
|
|
|
|
const render = () => {
|
|
ctx.fillStyle = `rgb(150, 200, 255)`;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
makeRgbLerpPic(ctx);
|
|
window.requestAnimationFrame(render);
|
|
};
|
|
render();
|
|
}
|
|
|
|
main();
|