Hola buen día.
Me surgió una duda y no sé si se puede realizar. En el siguiente código tengo un problema problemas que es que si ingreso un número mayor al ancho y alto del canvas no se alcanza a ver por completo el dibujo de la bandera, hay alguna manera para que el dato que yo ingrese sirva como variable y a su vez como ancho/alto del canvas
y no sé si haya una manera más eficiente de hacer que igual se dibujen cuadrados repetidos uno al lado del otro para formar la bandera, pero con las dimensiones que le indique en los prompts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bandera de Colombia</title>
</head>
<body>
<canvas width="600" height= "600" > </canvas>
<script>
function dibujarCuadrado(x,y,z,color) {
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = color;
pincel.fillRect(x,y,h/4,z);
}
var z = parseInt(prompt("Ingrese la altura de la bandera: "));
var h = parseInt(prompt("Ingrese el ancho de la bandera: "))
for (var x = 0; x < h; x = x + (h/4)) {
dibujarCuadrado(x,0,z/4,"yellow");
dibujarCuadrado(x,z/4,z/4,"yellow");
dibujarCuadrado(x,2*(z/4),z/4,"blue");
dibujarCuadrado(x,3*(z/4),z/4,"red");
}
</script>
</body>
</html>Muchas gracias de antemano.
