Buenas a quien pueda ayudarme, siento que me complique demasiado haciendo el codigo, de igual manera no logre hacer que no dibuje en el area de la paleta de colores, si lo pongo en 50 , como el circulo tiene 5pixeles de radio dibujar sobre ella, la unica solucion que encontre fue ponerlo en 55
De igual manera hice que solo con el click izquierdo se pueda dibujar y que con el derecho se reinicie el canvas para dibujar de nuevo
Acepto comentarios, soluciones o ayuda en general de como mejorar mi codigo y si me ayudan a corregir lo de la paleta de colores estaria perfecto
<canvas width="600" height="400"></canvas>
<script>
const screen = document.querySelector('canvas');
const brush = screen.getContext('2d');
brush.fillStyle = "lightgray";
brush.fillRect(0, 0, 600, 400);
let canDraw = false;
let y = 0
let currentColor = "blue"
function drawSquare(x, y, color) {
let screen = document.querySelector("canvas");
let brush = screen.getContext("2d");
brush.fillStyle = color;
brush.fillRect(x, y, 50, 50);
brush.strokeStyle = "black";
brush.strokeRect(x, y, 50, 50);
}
function drawCircle(event) {
if (canDraw) {
let x = event.pageX - screen.offsetLeft;
let y = event.pageY - screen.offsetTop;
if (x > 600 || y > 55) {
brush.fillStyle = currentColor;
brush.beginPath();
brush.arc(x, y, 5, 0, 2 * 3.14);
brush.fill();
}
}
}
function colorPalette() {
const colors = [
"black",
"red",
"green",
"blue",
"yellow",
"orange",
"purple",
"pink",
"white",
"brown",
"turquoise",
"gold"
];
let x = 0;
colors.forEach((color) => {
drawSquare(x, y, color);
x += 50;
});
screen.addEventListener("click", function (event) {
let x = event.pageX - screen.offsetLeft;
let y = event.pageY - screen.offsetTop;
if (y < 50) {
let colorIndex = Math.floor(x / 50);
currentColor = colors[colorIndex];
}
});
}
colorPalette();
screen.onmousemove = drawCircle;
function enableDrawing() {
if (event.button === 0) {
canDraw = true;
}
}
function disableDrawing() {
canDraw = false;
}
screen.onmousedown = enableDrawing;
screen.onmouseup = disableDrawing;
function clearScreen() {
brush.clearRect(0, 50, 600, 400);
}
function refresh() {
clearScreen();
brush.fillStyle = "lightgray";
brush.fillRect(0, 0, 600, 400);
colorPalette();
event.preventDefault();
}
screen.oncontextmenu = refresh;
</script>