<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);
var puedoDibujar = false;
var color = ["blue","green","red"];
var i = 0;
//esta funcion crea los circulos
function dibujarCirculo(x,y) {
if(puedoDibujar) {
pincel.fillStyle = color[i];
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * 3.14);
pincel.fill();
}
}
//esta funcion permite diseñar con el mouse en caso de que se este oprimiendo
function habilitarDibujar() {
puedoDibujar = true;
}
//esta funcion no permite seguir dibujando circulos en caso de que se levante el dedo del mouse
function deshabilitarDibujar() {
puedoDibujar = false;
}
//diseño de la paleta de colores
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);
//funcion para cambiar los colores al oprimir la paleta
function cambioColor(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
//si se oprime en este sector se cambia i y a su ves el color de la paleta
if(x < 50 && x > 0 && y < 50 && y > 0){
i=2;
}
//si se oprime en este sector se cambia i y a su ves el color de la paleta
if(x < 100 && x > 50 && y < 50 && y > 0){
i=1;
}
//si se oprime en este sector se cambia i y a su ves el color de la paleta
if(x < 150 && x > 100 && y < 50 && y > 0){
i=0;
}
}
//esta funcion no permite diseñar encima de la paleta
function diseñarEnPaleta (x,y){
if(x <= 155 && x >= 0 && y <= 55 && y >= 0 ){
return false;
}else{
return true;
}
}
//esta funcion captura el movimiento en x, y distribuyendolo en las funciones
function movimientoMouse(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
//el if verifica si el mouse esta dentro de la zona restringida usando la funcion diseñarEnPaleta,si esta regresa como resultado el true llama al instante a la funcion dibujar circulo, si regresa el false no grafica
if (diseñarEnPaleta(x,y)){
dibujarCirculo(x,y);
}
}
//permite capturar el movimiento del mouse
pantalla.onmousemove = dibujarCirculo;
pantalla.onmousemove = movimientoMouse;
//llama a la funcion cambioColor en caso de ser oprimido el mouse
pantalla.onclick = cambioColor;
//permite ejecutar un codigo o una funcion cuando el mouse este presionado
pantalla.onmousedown = habilitarDibujar;
//permite ejecutar una funcion cuando el mouse no sea presionado
pantalla.onmouseup = deshabilitarDibujar;
</script>
