<!DOCTYPE html>
<html lang="en">
<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="600px", height="400px"></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 xPositionr=0;
var xPositionv=50;
var xPositionb=100;
var yPosition=0;
var colorSelection="blue";
function dibujarCirculo(x,y,colorSelection) {
if(puedoDibujar) {
pincel.fillStyle = colorSelection;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * 3.14);
pincel.fill();
}
}
function dibujarRec(x,y,color){
pincel.fillStyle = color; //propiedad
pincel.fillRect(x,y,50,50); //funcion
pincel.strokeStyle= "black";
pincel.strokeRect(x,y,50,50);
pincel.fill();
}
function cuadroColor(){
dibujarRec(xPositionr,yPosition,"red");
dibujarRec(xPositionv,yPosition,"green");
dibujarRec(xPositionb,yPosition,"blue");
}
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
function movMouse(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
dibujarCirculo(x,y,colorSelection);
}
function escogerColor(evento){
var x=evento.pageX - pantalla.offsetLeft;
var y=evento.pageY - pantalla.offsetTop;
if(y>yPosition&&y<(yPosition+50)){
if(x>xPositionr&&(x<xPositionr+50)){
colorSelection="red";
}
else if(x>xPositionv&&x<(xPositionv+50)){
colorSelection="green"
}
else if(x>xPositionb&&x<(xPositionb+50)){
colorSelection="blue"
}
}
}
pantalla.onmousemove = movMouse;
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
cuadroColor();
pantalla.onclick=escogerColor;
</script>
</body>
</html>
