1

Estoy intentando hacer un mini-proyecto personal en el que quiero hacer que se muestre un dibujo en base a cierto patrón. Mi problema esta en que no logro hacer que se dibuje el patrón, puse un console.log("limitDraw"); y la primera vez que se ejecuta siempre me da 0 cuando lo que yo quiero es que me de el valor del width del canvas (si lo da pero al segundo click y ya no funciona como debe). Yo pienso que el error se encuentra ahí y también me parece que debe ser algún problema con el scope. Si tengo más errores de los que creo no es mi idea que me solucionen todo, pero hace mucho rato que estoy con este problema y a pesar de (yo creo) saber donde está no he podido solucionarlo. Desde ahora agradezco cualquier aporte y/o participación.

PD1: Dejo el código js y html completos para que tengan el panorama completo. PD2: Se van a dar cuenta de que en la función drawBorder() hice esto: var lado = drawing.width; que es prácticamente lo mismo que estoy intentado hacer en la función drawingByClick(), solo que en ésta última no funciona según lo esperado.

//Configuración y obtención de valores (por defecto) del Canvas 
var drawing = document.getElementById("draw");
var canvas = drawing.getContext("2d");

//Declaración e inicialización de variables
var num_lines = document.getElementById("num-lines");
var color_lines = document.getElementById("color-lineas");
var dimentionsCanvas = document.getElementById("tamaño-canvas");
var btn = document.getElementById("button");

//Dibujar una linea
function drawline(color, xinicial, yinicial, xfinal, yfinal) {
    canvas.beginPath();
    canvas.strokeStyle = color;
    canvas.moveTo(xinicial, yinicial);
    canvas.lineTo(xfinal, yfinal);
    canvas.stroke();
    canvas.closePath();
}

//Dibuja bordes al Canvas
function drawBorder() {
    var lado = drawing.width;
    drawline("black", 1, 1, 1, lado-1);
    drawline("black", 1, lado-1, lado-1, lado-1);
    drawline("black", lado-1, lado-1, lado-1, 1);
    drawline("black", lado-1, 1, 1, 1);
}

//Dibujar según patrón
function drawingByClick() {
    var limitDraw = drawing.width;
    console.log(limitDraw);
    var cantidadLinea = parseInt(num_lines.value);
    var l = 0;
    var yi, xf;
    var colorLinea = color_lines.value;
    var espacio = limitDraw / cantidadLinea;
    //var xi, yf;
    //var colorcito2 = "blue";
    
    for (l = 0; l < cantidadLinea; l++) {
        yi = espacio * l;
        xf = espacio * (l + 1);
        //xi = espacio * l;
        //yf = lado - (l * espacio);
        
        drawline(colorLinea, 0, yi, xf, limitDraw);
        drawline(colorLinea, limitDraw, yi, xf, 0);
        //drawline(colorcito2, xi, 300, 300, yf);
        //drawline(colorcito2, xi, 0, 0, yf);
    }
}

//Editar el alto y el largo del Canvas
function editDimention() {
    drawing.width = parseInt(dimentionsCanvas.value);
    drawing.height = parseInt(dimentionsCanvas.value);
}

//Llamada a las funciones desde el botón
btn.addEventListener("click", drawingByClick);
btn.addEventListener("click", editDimention);
btn.addEventListener("click", drawBorder);
<!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">
    <title>Dibujando con canvas</title>
</head>
<body>
    
    <h1>Dibujo en canvas</h1>
    <p>
        <strong>Cuantas líneas quieres?<br/></strong>
        <input type="text" id="num-lines" placeholder="ej.: 50" maxlength="5">
    </p>

    <p>
        <strong>Color: <br/></strong>
        <input type="color" id="color-lineas">
    </p>

    <p>
        <strong>Tamaño del lienzao<br/></strong>
        <input type="text" id="tamaño-canvas" placeholder="ej.: 300">
    </p>
    <br/> 
    <br/>

    <p>
        <input type="button" value="A dibujar!" id="button">
    </p>

    <p>
        Tu código quedó así:
    </p>

    <canvas width="0" height="0" id="draw"></canvas>
    
    <script src="code.js"></script>
</body>
</html>

1 respuesta 1

1

El problema es fácil de solucionar: el orden de ejecución de las funciones importa y estabas intentando dibujar en un canvas con tamaño 0:

//Configuración y obtención de valores (por defecto) del Canvas 
var drawing = document.getElementById("draw");
var canvas = drawing.getContext("2d");

//Declaración e inicialización de variables
var num_lines = document.getElementById("num-lines");
var color_lines = document.getElementById("color-lineas");
var dimentionsCanvas = document.getElementById("tamaño-canvas");
var btn = document.getElementById("button");

//Dibujar una linea
function drawline(color, xinicial, yinicial, xfinal, yfinal) {
    canvas.beginPath();
    canvas.strokeStyle = color;
    canvas.moveTo(xinicial, yinicial);
    canvas.lineTo(xfinal, yfinal);
    canvas.stroke();
    canvas.closePath();
}

//Dibuja bordes al Canvas
function drawBorder() {
    var lado = drawing.width;
    drawline("black", 1, 1, 1, lado-1);
    drawline("black", 1, lado-1, lado-1, lado-1);
    drawline("black", lado-1, lado-1, lado-1, 1);
    drawline("black", lado-1, 1, 1, 1);
}

//Dibujar según patrón
function drawingByClick() {
    var limitDraw = drawing.width;
    console.log(limitDraw);
    var cantidadLinea = parseInt(num_lines.value);
    var l = 0;
    var yi, xf;
    var colorLinea = color_lines.value;
    var espacio = limitDraw / cantidadLinea;
    //var xi, yf;
    //var colorcito2 = "blue";
    
    for (l = 0; l < cantidadLinea; l++) {
        yi = espacio * l;
        xf = espacio * (l + 1);
        //xi = espacio * l;
        //yf = lado - (l * espacio);
        
        drawline(colorLinea, 0, yi, xf, limitDraw);
        drawline(colorLinea, limitDraw, yi, xf, 0);
        //drawline(colorcito2, xi, 300, 300, yf);
        //drawline(colorcito2, xi, 0, 0, yf);
    }
}

//Editar el alto y el largo del Canvas
function editDimention() {
    drawing.width = parseInt(dimentionsCanvas.value);
    drawing.height = parseInt(dimentionsCanvas.value);
}

//Llamada a las funciones desde el botón
btn.addEventListener("click", () => {
  editDimention();
  drawBorder();
  drawingByClick();
  
});
<h1>Dibujo en canvas</h1>
<p>
    <strong>Cuantas líneas quieres?<br/></strong>
    <input type="text" id="num-lines" placeholder="ej.: 50" maxlength="5">
</p>

<p>
    <strong>Color: <br/></strong>
    <input type="color" id="color-lineas">
</p>

<p>
    <strong>Tamaño del lienzao<br/></strong>
    <input type="text" id="tamaño-canvas" placeholder="ej.: 300">
</p>
<br/> 
<br/>

<p>
    <input type="button" value="A dibujar!" id="button">
</p>

<p>
    Tu código quedó así:
</p>
<canvas width="0" height="0" id="draw"></canvas>

1
  • Wow, no puedo creer lo simple (mas o menos ya que no me di cuenta) que era, muchísimas gracias. el 22 sep. 2021 a las 2:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.