Aqui mi solución del mini paint: Funciona con detección de colores en el canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dibujar</title>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
let pantalla = document.querySelector("canvas")
let pincel = pantalla.getContext("2d")
let colorEscogido = "rgb(0,0,255)"
let puedoDibujar = false
// Paleta de colores
pincel.fillStyle = "grey"
pincel.fillRect(0, 0, 600, 400)
pincel.fillStyle = "blue"
pincel.fillRect(0, 0, 50, 50)
pincel.fillStyle = "red"
pincel.fillRect(50, 0, 50, 50)
pincel.fillStyle = "green"
pincel.fillRect(100, 0, 50, 50)
pincel.fillStyle = "rgb(237, 245, 20)"
pincel.fillRect(150, 0, 50, 50)
pincel.fillStyle = "rgb(4, 193, 222)"
pincel.fillRect(200, 0, 50, 50)
function dibujarCirculo(evento) {
if (puedoDibujar) {
let x = evento.pageX - pantalla.offsetLeft
let y = evento.pageY - pantalla.offsetTop
/* Para que el usuario no pueda dibujar dentro de la paleta de colores */
if (x >= 253 || y >= 55) {
pincel.fillStyle = colorEscogido
pincel.beginPath()
pincel.arc(x, y, 2, 0, 2 * 3.14)
pincel.fill()
}
}
}
function habilitarDibujar() {
puedoDibujar = true
}
function deshabilitarDibujar() {
puedoDibujar = false
}
function cambiarColor() {
// con esto capturo un objeto que contiene el color de dicho pixel
const pixel = pincel.getImageData(
event.offsetX,
event.offsetY,
1,
1
).data
/* me aseguro que solo tome un color cuando el usuario de click solo
en la barra de las paletas de colores */
if (event.offsetX <= 252 && event.offsetY <= 54) {
colorEscogido = `rgb(${pixel[0]},${pixel[1]},${pixel[2]})`
console.log(colorEscogido)
}
}
pantalla.addEventListener("mousemove", dibujarCirculo)
pantalla.addEventListener("click", cambiarColor)
pantalla.addEventListener("mousedown", habilitarDibujar)
pantalla.addEventListener("mouseup", deshabilitarDibujar)
</script>
</body>
</html>
