<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 * Math.PI);
pincel.fill();
}
}
function dibujarCuadrado(x, y, tamanho, color) {
pincel.fillStyle = color;
pincel.fillRect(x, y, tamanho, tamanho)
pincel.fill();
}
function dibujarPaletaColores() {
dibujarCuadrado(xRojo, yCuadrados, tamanhoCuadrados, "red");
dibujarCuadrado(xVerde, yCuadrados, tamanhoCuadrados, "green");
dibujarCuadrado(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 capturarMovimientoDelMouse(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 = capturarMovimientoDelMouse;
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
dibujarPaletaColores();
pantalla.onclick = seleccionarColor;
</script>Tuve algunos problemas, al principio no podia ver la pantalla en color o los colores no cambiaban, o no aparecia nada en la pantalla. Algunos de los errores que cometía era aplicar mal las funciones, o no escribirlas de la manera correcta por ejemplo disenahr en vez de disenhar. Errores de sintaxis que hacen que el código no funcione. Tuve que ver la opinión del instructor para poder resolverlo.
