<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;
// variables dibujar paleta de colores
var cRojo = 5;
var cVerde = 55;
var cAzul = 105;
var ycuadrados = 5;
var cTamano = 50;
var colorActual = 'blue';
// Funcion dibujar circulo
function dibujarCirculo(x,y,colorActual) {
if(puedoDibujar) {
pincel.fillStyle = colorActual;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * 3.14);
pincel.fill();
}
}
// Funcion dibujar cuadrados de las paletas de colores
function dibujarCuadrado(x,y,cTamano,color){
pincel.fillStyle = color;
pincel.fillRect(x, y, cTamano, cTamano);
pincel.fill();
pincel.strokeStyle = "black";
pincel.strokeRect(x, y, cTamano, cTamano);
}
//Función para dibujar la paleta de colores
function dibujarPaletaColores() {
dibujarCuadrado(cRojo,ycuadrados,cTamano,'red');
dibujarCuadrado(cVerde,ycuadrados,cTamano,'green');
dibujarCuadrado(cAzul,ycuadrados,cTamano,'blue');
}
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
//Función para delimitar el área
function puedeDisenharArea(xCoordenada,yCoordenada){
if (xCoordenada >= 0 && (xCoordenada < (3*cTamano+15)) &&
(yCoordenada >=0 && yCoordenada < (cTamano+15))) {
return false;
} else{
return true;
}
}
function capturarMovimientoDelMouse(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if (puedeDisenharArea(x,y)){
dibujarCirculo(x,y,colorActual);
}
}
//funcion seleccionar color
function SeleccionarColor(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if ( y > ycuadrados && y < (ycuadrados + cTamano)){
if(x > cRojo && x < (cRojo + cTamano)) {
colorActual = "red";
console.log(colorActual);
} else if (x > cVerde && x < (cVerde + cTamano)) {
colorActual = "green";
} else if(x > cAzul && x < (cAzul + cTamano)) {
colorActual = "blue";
}
}
}
pantalla.onmousemove = capturarMovimientoDelMouse;
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
dibujarPaletaColores();
pantalla.onclick = SeleccionarColor;
</script>
