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;