Hola, comunidad. Aquí tiene mi solución, me complique bastante, pero la idea que tenia era, si en el futuro me pedían cambiar el tamaño del cuadradro, es que con solo cambiando el tamaño de dimensionCuadrado se ajuste todo sin tener que modificar mucho el código. Sin embargo, luego ver los demás códigos noté que mi implementación fue más complicada. Les adjunto el código y si alguno desea aportar ideas de mejora, con gusto.
<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);
function limpiarPantalla(ancho, altura){
pincel.clearRect(0,0,ancho,altura);
}
var colores = ["red","green","blue"];
var color = 2;
function crearCuadrado(x,y,ancho,altura,color) {
pincel.fillStyle=color;
pincel.fillRect(x,y,ancho,altura);
}
dimensionCuadrado = 50;
function crearRectanguloTriColor() {
crearCuadrado(0,0,dimensionCuadrado,dimensionCuadrado,"red");
crearCuadrado(dimensionCuadrado,0,dimensionCuadrado,dimensionCuadrado,"green");
crearCuadrado(dimensionCuadrado*2,0,dimensionCuadrado,dimensionCuadrado,"blue");
}
function actualizarPantalla(){
limpiarPantalla(dimensionCuadrado*3,dimensionCuadrado);
crearRectanguloTriColor();
}
function encontrarArea(x,y,maxX0,minX0,maxY1,minY1,codColor) {
if ((x < maxX0) &&
(x > minX0) &&
(y < maxY1) &&
(y > minY1 )){
console.log(x,y);
color=codColor
}
}
setInterval(actualizarPantalla,1);
var puedoDibujar = false;
function dibujarCirculo(evento) {
if(puedoDibujar) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
encontrarArea(x,y,dimensionCuadrado,dimensionCuadrado-dimensionCuadrado,dimensionCuadrado,dimensionCuadrado-dimensionCuadrado,0);
encontrarArea(x,y,dimensionCuadrado*2,dimensionCuadrado,dimensionCuadrado,dimensionCuadrado-dimensionCuadrado,1);
encontrarArea(x,y,dimensionCuadrado*3,dimensionCuadrado*2,dimensionCuadrado,dimensionCuadrado-dimensionCuadrado,2);
console.log(x,y);
pincel.fillStyle = colores[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;
}
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
</script>