As you can see, it goes from the outline I need to fix it. I leave the codes here: link
I made some changes and now it works. What were you wrong about ?:
let input_color = document.querySelector("[type='color']") selects the first element whose type is color . to select the second you need let input_color2 = document.querySelectorAll("[type='color']")[1];
When you click on an input type="color" you have to change the value of the fill or the border, according to the input in which you click, but every time you have to paint the figure.
I've also seen that you wanted ctx.fillStyle = el_color and ctx.strokeStyle = el_color2 within the function that the polygon draws.
let miLienzo = document.getElementById("myCanvas");
let Figuras = document.getElementById("Figuras");
let lapiz = miLienzo.getContext("2d");
let cw = (miLienzo.width = 350),
cx = cw / 2;
let ch = (miLienzo.height = 200),
cy = ch / 2;
let R = 100;
let el_color = "#ff0000";
let el_color2 = "#00ff00";
//lapiz.fillStyle = el_color;
//lapiz.strokeStyle = el_color2;
let lados = 0;
let input_color = document.querySelectorAll("[type='color']")[0];
input_color.value = el_color;
input_color.addEventListener("input", actualizar1, false);
//input_color.addEventListener("change", actualizar2, false);
input_color.select();
//Aqui finaliza el relleno interior de la figura
//Aqui comienza el contorno de color el segundo input type color
let input_color2 = document.querySelectorAll("[type='color']")[1];
input_color2.value = el_color2;
input_color2.addEventListener("input", actualizar2, false);
//input_color2.addEventListener("change", actualizar2, false);
input_color2.select();
//$("#Figuras").on("change",
Figuras.addEventListener("change",
function() {
lados = Figuras.value;
pintarFigura(lados, lapiz);
});
function pintarFigura(lados, ctx) {
if(lados){
clearCanvas();
ctx.save();
ctx.translate(cx, cy);
if (lados != "rect") {
//Sino es un rectangulo entra aqui
if (lados == 4) {
ctx.rotate(Math.PI / 4);
dibujarPoligono(lados, ctx);
ctx.rotate(-Math.PI / 4);
} else {
//Si es un rectangulo dibujalo
dibujarPoligono(lados, ctx);
}
} else {
dibujarRectangulo(ctx, 200, 100);
}
ctx.restore();}
}
function clearCanvas() {
lapiz.clearRect(
-miLienzo.width,
-miLienzo.height,
2 * miLienzo.width,
2 * miLienzo.height
);
lapiz.beginPath();
}
function dibujarPoligono(L, ctx) {
ctx.beginPath();
for (var i = 0; i < L; i++) {
x = R * Math.cos(2 * Math.PI / L * i - Math.PI / 2);
y = R * Math.sin(2 * Math.PI / L * i - Math.PI / 2);
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.lineWidth = 5;
ctx.fillStyle = el_color;
ctx.strokeStyle = el_color2;
ctx.fill();
ctx.stroke();
}
function dibujarRectangulo(ctx, w, h) {
ctx.lineWidth = 5;
ctx.fillStyle = el_color;
ctx.strokeStyle = el_color2;
ctx.beginPath();
ctx.fillRect(-w / 2, -h / 2, w, h);
ctx.strokeRect(-w / 2, -h / 2, w, h);
}
function actualizar1(event) {
el_color = event.target.value;
pintarFigura(lados, lapiz);
}
function actualizar2(event) {
el_color2 = event.target.value;
pintarFigura(lados, lapiz);
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open sans';
width:100vw;
height:100vh;
}
.contenedor{
width:360px;
height:300px;
display:block;
position:absolute;
margin:auto;
top:0;bottom:0;left:0;right:0;
text-align:center;
border:1px solid
}
p{margin:1em;}
canvas{border:2px solid black;}
#Figuras{
font-size: 1em;
}
h1{
text-align: center;
margin-top: 10px;
}<h1>APRENONLINE</h1>
<div class="contenedor">
<p><select id="Figuras">
<option>
Seleccione su figura
</option>
<option value="100">
Círculo
</option>
<option value="3">
Triángulo
</option>
<option value="4">
Cuadrado
</option>
<option value="rect">
Rectángulo
</option>
<option value="5">
Pentágono
</option>
<option value="6">
Hexágono
</option>
<option value="8">
Octágono
</option>
<option value="cubo">
Cubo
</option>
<option value="esfera">
Esfera
</option>
<option value="cono">
Cono
</option>
<option value="piramide">
Pirámide
</option>
<option value="cilindro">
Cilindro
</option>
</select></p>
<label>Relleno: </label>
<input type="color">
<label>Contorno: </label>
<input type="color">
<canvas id="myCanvas" style="">
</canvas>
</div>I hope it's useful.
You could add the following to your function that draws the polygons to draw the outline:
ctx.strokeStyle=$("input[type='color']:eq(1)").val();
ctx.lineWidth=5;
ctx.stroke();
Good luck!