Buenas noches, he estado haciendo el programa de diseñando con el mouse, lo unico que no me hace es pintar toda el area del color elegido, ya que solo lo hace en forma vertical, si alguien pudiera ayudarme, aqui esta mi codigo:
Buenas noches, he estado haciendo el programa de diseñando con el mouse, lo unico que no me hace es pintar toda el area del color elegido, ya que solo lo hace en forma vertical, si alguien pudiera ayudarme, aqui esta mi codigo:
No puedo ver tu código, podrías compartirlo nuevamente, por favor.
`
`
Si pudieses compartirlo por otro medio como Drive o Github, o en el mismo Discord, te podría ayudar, mi nickname es KevinMJ, sólo súbelo a cualquier canal y me taggeas. Ya que sólo puedo ver esto : 
podes pasar el codigo? asi lo veo tenes que agregarlo dentro de el boton </> que te aparece a la hora de comentar
es este
<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);
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);
var puedoDibujar = false;
function dibujarCirculo(evento) {
if(puedoDibujar) {
var color;
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
console.log(x);
console.log(y);
if(x>0){
var color = 'red';
}
if(x>50){
var color = 'green';
}
if(x>100){
var color = 'yellow';
}
if(x>150){
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * 3.14);
pincel.fill();
}
if(y>50){
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;
}
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
</script>
buen dia !!! estuve mirando tu codigo , primero tienes puestos en la tercer condicion if color = yellow y es blue , la variable color la declaras dentro de la funcion por lo cual por fuera no funcionaria , por lo cual la tendrías que declarar por fuera o que la funcion devuelva por medio de return color ,tercero vos dibujaste cada cuadro uno por uno y seria mas recomendable crear una función y pasarle los parametros asi mejoramos el codigo .
Aca te dejo como lo resolvi , se puede mejorar mas, pero lo principal que pidio el profesor lo hace , espero haberte ayudado , saludos
<script>
var pantalla = document.querySelector('canvas');
var pincel = pantalla.getContext('2d');
var color = "blue";
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
//
function dibujarCuadrado(x,y,color){
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = color;
pincel.fillRect(x,y,50,50);
}
dibujarCuadrado(0,0,"red")
dibujarCuadrado(50,0,"green")
dibujarCuadrado(100,0,"blue")
var puedoDibujar = false;
function dibujarCirculo(evento) {
if(puedoDibujar) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if(x < 155 && y < 55) return; //se se sumo el radio
pincel.fillStyle =color;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * 3.14);
pincel.fill();
}
}
function cambiarColor(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if(x <= 50 && y < 50) {
color = "red";
}
if(x >50 && x <= 100 && y < 50){
color = "green";
}
if(x > 100 && x <= 150 && y < 50 ){
color = "blue";
}
}
pantalla.onclick = cambiarColor;
pantalla.onmousemove = dibujarCirculo;
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;muchas gracias, saludos!!