62 lines
1.3 KiB
JavaScript
62 lines
1.3 KiB
JavaScript
const colors = {
|
|
background: 'rgb(128, 128, 128)',
|
|
line: 'rgb(80, 40, 255)',
|
|
};
|
|
|
|
export class Voronai {
|
|
div = undefined;
|
|
canvas = undefined;
|
|
|
|
setDiv(id) {
|
|
this.div = document.getElementById(id);
|
|
// Create canvas that fills the window
|
|
// If the window resizes, also resize the canvas
|
|
const canvas = document.createElement('canvas')
|
|
this.canvas = canvas;
|
|
this.div.appendChild(canvas);
|
|
this.fullscreen();
|
|
window.addEventListener('resize', () => this.fullscreen());
|
|
return this;
|
|
}
|
|
|
|
get ctx() {
|
|
const ctx = this.canvas.getContext("2d");
|
|
ctx.resetTransform();
|
|
return ctx;
|
|
}
|
|
|
|
get width() {
|
|
return this.canvas.width;
|
|
}
|
|
|
|
get height() {
|
|
return this.canvas.height;
|
|
}
|
|
|
|
fullscreen() {
|
|
this.canvas.width = document.documentElement.clientWidth;
|
|
this.canvas.height = document.documentElement.clientHeight;
|
|
}
|
|
|
|
fillCanvas() {
|
|
const ctx = this.ctx;
|
|
ctx.fillStyle = colors.background;
|
|
ctx.fillRect(0, 0, this.width, this.height);
|
|
}
|
|
|
|
drawSomething() {
|
|
const ctx = this.ctx;
|
|
ctx.strokeWidth = 1.0;
|
|
ctx.strokeStyle = colors.line;
|
|
ctx.beginPath();
|
|
let x = this.width / 2;
|
|
let y = this.height / 2;
|
|
// ctx.moveTo(x, y);
|
|
ctx.arc(x, y, 10, 0, 2 * Math.PI);
|
|
console.log('drawing arc?');
|
|
ctx.stroke();
|
|
}
|
|
|
|
}
|
|
|