Al terminar el codigo no me sale para poder seleccionar los colores, aqui dejo mi codigo:
<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;
var xRojo = 0;
var xVerde = 50;
var xAzul = 100;
var yCuadrados = 0;
var tamanhoCuadrados = 50;
var colorActual = "blue";
function dibujarCirculo(x,y,colorActual) {
if(puedoDibujar){
pincel.fillStyle = colorActual;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * 3.14);
pincel.fill();
}
}
function dibujarCuadrado(x, y, tamanho, color){
pincel.fillStyle = color;
pincel.fillRect(x, y, tamanho, tamanho);
pincel.fill();
}
function dibujarPaletaColores(){
puedoDibujar(xRojo, yCuadrados, tamanhoCuadrados, "red");
puedoDibujar(xVerde, yCuadrados, tamanhoCuadrados, "green");
puedoDibujar(xAzul, yCuadrados, tamanhoCuadrados, "blue");
}
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
function puedeDisenharArea(xCoordenada,yCoordenada){
if ((xCoordenada >= 0 && xCoordenada < (3*tamanhoCuadrados+5)) && (yCoordenada >= 0 && yCoordenada < (tamanhoCuadrados+5))){
return false;
} else{
return true;
}
}
function capturarMovimientoRaton(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if (puedeDisenharArea(x,y)){
dibujarCirculo(x,y,colorActual);
}
}
function seleccionarColor(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if (y > yCuadrados && y < (yCuadrados + tamanhoCuadrados)){
if (x > xRojo && x < (xRojo + tamanhoCuadrados)){
colorActual = "red";
console.log(colorActual);
} else if (x > xVerde && x < (xVerde + tamanhoCuadrados)){
colorActual = "green";
} else if (x > xAzul && x (xAzul + tamanhoCuadrados)){
colorActual = "blue";
}
}
}
pantalla.onmousemove = capturarMovimientoRaton;
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
dibujarPaletaColores();
pantalla.onclick = seleccionarColor;
</script>