41 lines
1015 B
JavaScript
41 lines
1015 B
JavaScript
class Canvas {
|
|
|
|
width;
|
|
|
|
height;
|
|
|
|
canvas;
|
|
|
|
ctx;
|
|
|
|
constructor(canvasElementId, width, height, mouseMove) {
|
|
this.width = width;
|
|
this.height = height;
|
|
|
|
this.canvas = document.getElementById(canvasElementId);
|
|
this.canvas.width = width;
|
|
this.canvas.height = height;
|
|
this.canvas.addEventListener('contextmenu', event => event.preventDefault());
|
|
this.canvas.onmousemove = mouseMove;
|
|
this.canvas.onmousedown = mouseMove;
|
|
this.canvas.onmouseup = mouseMove;
|
|
|
|
this.ctx = this.canvas.getContext("2d");
|
|
}
|
|
|
|
getPixelColor(event) {
|
|
const colorArray = this.ctx.getImageData(event.offsetX, event.offsetY, 1, 1).data;
|
|
const colorInt = (colorArray[0] << 16) | (colorArray[1] << 8) | colorArray[2];
|
|
const colorHex = colorInt.toString(16);
|
|
return "#" + colorHex.padStart(6, "0");
|
|
}
|
|
|
|
fillRect(x, y, color) {
|
|
this.ctx.beginPath();
|
|
this.ctx.fillStyle = color;
|
|
this.ctx.rect(x * this.size, y * this.size, this.size, this.size);
|
|
this.ctx.fill();
|
|
}
|
|
|
|
|
|
} |