<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector('canvas');
var pincel = pantalla.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
var puedoDibujar = false;
//Coloco todas las variables al principio para facilitar la lectura de los comentarios
/*Arreglo de colores que queremos usar. Para habilitar un nuevo color solamente hay que agregarlo al array.*/
var colores = ["red", "green", "blue", "black", "orange", "yellow", "pink", "brown", "white", "darkgrey"];
/*Array para guardar las coordenadas X que indican el límite derecho de cada cuadrado en nuestra barra. La función dibujarBarra
se encarga de agregar los límites al array*/
var xColores = [];
/*En esta variable elegimos la altura de cada cuadrado. Como un cuadrado tiene lados iguales, usamos la misma variable para definir
el ancho. En caso de querer dibujar rectángulos, habría que escribir una variable anchoX */
var alturaY = 30;
/*Esta variable define el tamaño que tendrá el círculo dibujado por el pincel. Al definirla por separado, podemos elegir radios arbitrarios y usar el dato en otros cálculos. */
var radioCirculo = 5;
/*Esta variable selecciona un color por defecto al iniciar la página. */
var colorSeleccionado = "black";
/*Ver comentario en opiniones (excedía el límite de caracteres permitidos)*/
function dibujarCirculo(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if (x <= xColores[xColores.length - 1] + radioCirculo && y <= alturaY + radioCirculo){
}else if (puedoDibujar) {
pincel.fillStyle = colorSeleccionado;
pincel.beginPath();
pincel.arc(x, y, radioCirculo, 0, 2 * 3.14);
pincel.fill();
}
}
/*Ver comentario en opiniones (excedía el límite de caracteres permitidos)*/
function cambiarColor(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if (x < xColores[xColores.length - 1] && y < alturaY){
var coordenadaInicio = 0;
for(var i = 0; i <= xColores.length; i++){
if(x > coordenadaInicio && x < xColores[i]){
colorSeleccionado = colores[i];
break;
}else{
coordenadaInicio = xColores[i];
}
}
}
}
function dibujarRectangulo(x, y, base, altura, color) {
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle=color;
pincel.fillRect(x,y, base, altura);
pincel.strokeStyle="black";
pincel.strokeRect(x,y, base, altura);
}
/* La función dibujarBarra hace uso de la función dibujarRectangulo para dibujar cuadrados de lado alturaY. El ciclo for itera a traves del array colores para agregar cada nuevo color a la derecha (según los píxeles que elegimos para alturaY, ya que dibujamos cuadrados)*/
function dibujarBarra(){
var x = 0;
for(var i = 0; i < colores.length; i++){
dibujarRectangulo(x,0,alturaY,alturaY,colores[i]);
xColores.push(x+=alturaY);
}
}
dibujarBarra();
pantalla.onmousemove = dibujarCirculo;
/* El evento onclick se encarga de llamar a la función cambiarColor, que evaluará primero si estamos en el área correspondiente a la barra de colores*/
pantalla.onclick = cambiarColor;
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
</script>
