Hola amigos buen día estoy trabajando en un pequeño ejercicio de canvas
dada una coordenadas de un rectángulo este se debe de dibujar, ya lo hace lo que no puedo hacer es darle color al rectángulo no se que estoy haciendo mal o como podría solucionarlo, gracias les dejo el código
Código PHP:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="estiloage.css">
</head>
<body>
<p>Dibujo un rectangulo</p>
<fieldset>
<legend>Coordenadas del rectangulo</legend>
x1<input type="text" id="x1">
y1<input type="text" id="y1">
x2<input type="text" id="x2">
y2<input type="text" id="y2">
Color <input type="color" id="color">
<input type="button" value="pintar" onclick="pintar()">
</fieldset>
<canvas width="700" height="700" style="border:solid; margin-left:20%; margin-top:2%;" id="canvas"></canvas>
<script>
function pintar()
{
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x1 = parseInt ( document.getElementById("x1").value);
var y1 = parseInt ( document.getElementById("y1").value);
var x2 = parseInt ( document.getElementById("x2").value);
var y2 = parseInt ( document.getElementById("y2").value);
var color = document.getElementById("color").value;
var cad = " ' "+ color + " ' ";
ctx.fillStyle = cad;
ctx.fillRect(x1, y1, x2, y2);
}
</script>
</body>
</html>