<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas width="800" height="600"></canvas>
</body>
</html>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightpink";
pincel.fillRect (0,0,800,600);
var i = 0;
var colores = ["springgreen", "hotpink", "deepskyblue", "lightpink"];
var puedoDibujar = false;
// paleta de colores:
pincel.fillStyle = colores[0];
pincel.fillRect (0,0,50,50);
pincel.fillStyle = colores[1];
pincel.fillRect (50,0,50,50);
pincel.fillStyle = colores[2];
pincel.fillRect (100,0,50,50);
pincel.fillStyle = "grey";
pincel.fillRect (150,0,50,50);
// borrador:
pincel.beginPath();
pincel.fillStyle = "white";
pincel.moveTo(170,12);
pincel.lineTo(190,12);
pincel.lineTo(180,27);
pincel.lineTo(160,27);
pincel.lineTo(170,12);
pincel.moveTo(190,12);
pincel.lineTo(190,22);
pincel.lineTo(180,37);
pincel.lineTo(160,37);
pincel.lineTo(160,27);
pincel.moveTo(180,27);
pincel.lineTo(180,37);
pincel.fill();
pincel.strokeStyle = "black";
pincel.lineWidth = "0.5";
pincel.moveTo(170,12);
pincel.lineTo(190,12);
pincel.lineTo(180,27);
pincel.lineTo(160,27);
pincel.lineTo(170,12);
pincel.moveTo(190,12);
pincel.lineTo(190,22);
pincel.lineTo(180,37);
pincel.lineTo(160,37);
pincel.lineTo(160,27);
pincel.moveTo(180,27);
pincel.lineTo(180,37);
pincel.stroke();
function seleccionarColor(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if ((x < 50) && (x > 0) && (y > 0) && (y < 50)) {
i=0;
} else if ((x < 100) && (x > 50) && (y > 0) && (y < 50)) {
i=1;
}else if ((x < 150) && (x > 100) && (y > 0) && (y < 50)) {
i=2;
}else if ((x < 200) && (x > 150) && (y > 0) && (y < 50)) {
i=3;
};
};
function fueraDeRango(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if ((x <= 210) && (x >= 0) && (y >= 0) && (y <= 60)) {
deshabilitarDibujar();
};
};
pantalla.onclick = seleccionarColor;
// pincel:
function dibujarCirculo(evento) {
fueraDeRango(evento);
if ((puedoDibujar)) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
pincel.fillStyle = colores[i];
pincel.beginPath();
pincel.arc(x,y,10,0,2*Math.PI);
pincel.fill();
};
};
pantalla.onmousemove = dibujarCirculo;
function habilitarDibujar() {
puedoDibujar = true;
};
function deshabilitarDibujar() {
puedoDibujar = false;
};
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
</script>
