<canvas width="1000" height="600"></canvas>
<script>
// variables
var pantalla = document.querySelector('canvas');
var pincel = pantalla.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 1000, 600);
var puedoDibujar = false;
var colores = ["white","black","purple","blue","green","yellow","red","grey"] // se pueden agregar mas colores, colocandolos al inicio
var indice = 0
var radio = 5
var limitePx
// funciones
function dibujarCuadroColor(x,y,i){ // crea un cuadro con un color
pincel.fillStyle = colores[i]
pincel.fillRect(x,y,50,50)
pincel.strokeStyle = "black"
pincel.strokeRect(x,y,50,50)
}
function paleta(){ // crea la paleta de colores con la cantidad de colores definida en el array de colores
var aux = 0;
for(var i = 0;i<colores.length;i++){
dibujarCuadroColor(aux,0,i)
aux+=50
}
}
function cambiarColor(evento) {
var x = evento.pageX - pantalla.offsetLeft // obtendra las coordenadas en el eje x dentro de la pizarra
var y = evento.pageY - pantalla.offsetTop // obtendra las coordenadas en el eje y dentro de la pizarra
var aux = 0; // este auxiliar nos ayudara para avanzar 50px y asi estar sobre el siguiente color
for(var i = 0;i<colores.length;i++){ // iterara sobre el indice del array de colores
if((x<aux+50)&&(x>aux)&&(y<50)&&(y>0)){ // dependiendo las coordenadas, eligira el color, cada 50px pasa al color siguiente
indice = i
break
}
if((x>colores.length*50-50)&&(x<colores.length*50)){ // si esta en la posicion del color gris(borrador), el radio del pincel aumentara para borrar mas facil
radio=15
}
else{ // sino el radio del pincel sera normal
radio=5
}
aux+=50
}
}
function dibujarPincel(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if((x<(colores.length*50+16))&&(x>0)&&(y<50+16)&&(y>0)){ // deshabilita el pincel encima de la paleta de colores
deshabilitarDibujar
}
else if(puedoDibujar) { // habilita el pincel en el resto del pizarron
pincel.fillStyle = colores[indice];
pincel.beginPath();
pincel.arc(x, y, radio, 0, 2 * 3.14);
pincel.fill();
}
}
function habilitarDibujar() {puedoDibujar = true;}
function deshabilitarDibujar() {puedoDibujar = false;}
// llamado a funciones
paleta() // crea la paleta de colores
pantalla.onclick = cambiarColor // evento asociado al cambio de color
pantalla.onmousemove = dibujarPincel; // evento asociado al movimiento del pincel
pantalla.onmousedown = habilitarDibujar; // evento asociado para habilitar el pincel
pantalla.onmouseup = deshabilitarDibujar; // evento asociado para deshabilitar el pincel
</script>y se ve asi: !
