Hola, pude hacer el ejercicio pero cuando lo compare con el ejemplo , no lo entendi, queria saber si esta "tan mal mi codigo", trate de modificar lo menos posible, pero me da la sensacion que es mucho mas complicada la version del ejemplo gracias de antemano este es mi codigo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<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);
//cuadrados
pincel.fillStyle = 'red';
pincel.fillRect(0, 0, 50, 50);
pincel.fillStyle = 'green';
pincel.fillRect(50, 0, 50, 50);
pincel.fillStyle = 'blue';
pincel.fillRect(100, 0, 50, 50);
puedoDibujar = false;
var color="orange";
function dibujarCirculo(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if (puedoDibujar&&((x>154)||(y>53))
) {
pincel.fillStyle =color;
pincel.beginPath();
pincel.arc(x, y,5, 0, 2 * 3.14);
pincel.fill();
}
}
pantalla.onmousemove = dibujarCirculo;
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
function cambiarColor(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if((x>0&&x<50)&&(y>0&&y<50)){
color="red";
}
if((x>50&&x<100)&&(y>0&&y<50)){
color="green";
}
if((x>100&&x<150)&&(y>0&&y<50)){
color="blue";
}
}
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
pantalla.onclick = cambiarColor;
</script>
</body>
</html>
