Buenas Tardes a todos, les comparto mi código:
<!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" />
<meta name="author" content="Nicolás Minutti" />
<meta name="description" content="Pruebas de JavaScript y HTML" />
<title>Práctica de Canvas</title>
</head>
<body>
<canvas width="600" height="400" id="plantilla">
<h3>Su navegador no soporta CANVAS :(</h3>
</canvas>
<script>
var plantilla = document.getElementById("plantilla")
var pincel = plantilla.getContext("2d")
var paleta = ["red", "green", "blue"]
var tamanio = [0, 50, 100]
pincel.fillStyle = "lightgrey"
pincel.fillRect(0, 0, 600, 400)
var puedoDibujar = false
pincel.fillStyle = paleta[2]
function dibujarPaleta() {
for (var index = 0; index < paleta.length; index++) {
pincel.fillStyle = paleta[index]
pincel.fillRect(tamanio[index], 0, 50, 50)
}
}
function dibujarCirculo(evento) {
if (puedoDibujar) {
var x = evento.pageX - plantilla.offsetLeft
var y = evento.pageY - plantilla.offsetTop
if ((x > 0 && y > 50) || (x > 150 && y > 0)) {
pincel.beginPath()
pincel.arc(x, y, 5, 0, 2 * Math.PI)
pincel.fill()
}
}
}
function habilitarDibujar(evento) {
var x = evento.pageX - plantilla.offsetLeft
var y = evento.pageY - plantilla.offsetTop
if (x <= 50 && y <= 50) {
pincel.fillStyle = paleta[0]
}
if ((x >= 50 && y >= 0) && (x <= 100 && y <= 50)) {
pincel.fillStyle = paleta[1]
}
if ((x >= 100 && y >= 0) && (x <= 150 && y <= 50)) {
pincel.fillStyle = paleta[2]
}
puedoDibujar = true
}
function deshabilitarDibujar() {
puedoDibujar = false
}
dibujarPaleta()
plantilla.onmousemove = dibujarCirculo
plantilla.onmousedown = habilitarDibujar
plantilla.onmouseup = deshabilitarDibujar
</script>
</body>
</html>Espero les sea de utilidad. Saludos.-
