Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

Compartiendo mejora

Hola! Ojala puedan dar un vistazo a mi código, hice una breve mejora, añadí un cuadrado blanco para reestablecer mi canvas por si el usuario quisiese borrar, me gustaría saber como añadir texto, queria añadir en ese cuadro la palabra "Borrar" por ejemplo

var pantalla = document.querySelector('canvas');
var pincel = pantalla.getContext('2d');
var colorea="blue";

var puedoDibujar = false;

limpiarPantalla();

function limpiarPantalla(){ pincel.clearRect(0,0,600,400); 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); pincel.fillStyle="White"; pincel.fillRect(150,0,50,50); colorea="blue"; }

function dibujarCirculo(evento) {

var x = evento.pageX - pantalla.offsetLeft; var y = evento.pageY - pantalla.offsetTop; if((puedoDibujar==true) && (x>210 || y>55)) {

        pincel.fillStyle = colorea;
        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 colores(evento){
    var x=evento.pageX-pantalla.offsetLeft;
    var y=evento.pageY-pantalla.offsetTop;

    if(x<50 && y<50 && x>=0 && y>=0){
       colorea="red" ; 

       }
       if(x<100 && y<50 && x>=50 && y>=0){
       colorea="green" ; 

       } 
       if(x<150 && y<50 && x>=100 && y>=0){
       colorea="blue" ; 

       }
    if(x<200 && y<50 && x>=150 && y>=0){
      limpiarPantalla();

       }
}
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
pantalla.onclick=colores;
2 respuestas

Hola Lourdes, espero que estés bien! Gracias por compartir tu código con nosotros. Si tiene alguna pregunta sobre el contenido del curso, estamos aquí para ayudarlo. ¡Sigue practicando! ¡Vamos juntos! :)

Si este post te ayudó, por favor, marca como solucionado ✓.

SI, mi pregunta era como añadir texto dentro del canvas a través del script