Hola, cada vez que intento dibujar sobre un canvas me sale "Uncaught TypeError: Cannot read property 'getContext' of null at archivo.js",

Aarón Ortiz

Pregunta

student•hace 8 años

CARLOS DANIEL OCAMPO FARILL

student•hace 2 años

Hola trato de crear un tablero con canvas y javascript pero tengo un error con getContex "Uncaught TypeError TypeError: canvas.getContex is not a function" Anexo el codigo

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale =1.0"> </head> <body> <canvas id="mycanvas" width="500" height="500" style="border: 2px solid rgb(103, 224, 4)" ></canvas>

    <script>
        var canvas = document.getElementById("mycanvas");
         var ctx = canvas.getContex('2d');
    
         columna = 300;
         fila= 300;
         tableroX=5;
         tableroY=5;
    
         var cuadroWidth = (columna) /8;
         var cuadroHeight = (fila) /8;
    
         for (var row =0; row < 8; row++){
            for (var col =0; col<8; col++){
                var x= col * (cuadroWidth +1);
                var y=row * (cuadroHeight +1);
                ctx.fillStyle = (row+col) %2==0? "#ff0000" : "#ff0001";
                ctx.fillRect(x,y, cuadroWidth, cuadroHeight);
            }
         }
       
           </script>

</body>

</html>

jefte Ortiz

student•hace 3 años

hola, tengo este error: dibujo.js:21 Uncaught TypeError: Cannot read properties of null (reading 'value') at HTMLInputElement.dibujoPorClick se que el error viene de var linea = parseInt(texto.value); porque al borrar eso y colocarle un valor funciona, pero value es la que no me esta funcionando, como puedo solucionarlo?

Hector Garcia

student•hace 3 años

<!DOCTYPE html>
<html
  <head>
    <meta charset="utf-8">
    <title>Dibujando en Canvas</title>
  </head>
  <body>
    <h1>Dibujando en Canvas</h1>

    <script src="hg.js"> </script>

    <canvas width=“300” height=“300” id=“dibujito”></canvas>

    <p>Asi queda tu dibujo</p>

  </body>
</html>

var d = document.getElementById('dibujito');
var lienzo = d.getContext('2d')

lienzo.beginPath();
lienzo.strokeStyle = "red";
lienzo.moveTo(100,100);
lienzo.lineTo(200,200);
lienzo.stroke();
lienzo.closePath();

Nicole Vargas

student•hace 3 años

A mí me pasaba lo mismo, se solucionó cuando dejé el id al lado de la etiqueta de inicio de canvas

Brayan Patiño

student•hace 3 años

todos mis documentos me salen con errores cuando funcionaban bien anteriormente, me podrian ayudar

diego gonzalez

student•hace 4 años

Hola gente a mi lo que me paso fue que sin darme cuenta en el html tenia 2 ID uan que decia canvas que crea atom por defecto y el que cree yo por eso me pasaba ese error

Angie Cerón

student•hace 4 años

Me sucedió lo mismo. Pese a las advertencias de Freddy hay que fijarse en las mayúsculas y minúculas.

Josseth Rodriguez

student•hace 4 años

hola, yo tuve ese error, en mi caso fue que el ID en el HTML la primera letra la tenia en mayusculas, y en JavaScript esta todo en minuscula, revisen eso 😂😆😅

Santiago J.

student•hace 4 años

A mi me pasaba que directamente getContext ni siquiera me aparecía como opción de método para aplicarle a "d", literal probé una por una las soluciones que publicaron y nada, no había caso. Hasta que resignado cambie el nombre de la variable "d" por "Hola" y ahí si anduvo. Sigo buscando explicación pero bueno si a alguien esta en la misma que yo sepa q asi lo puede solucionar y poder seguir con este modulo.

<<!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>Dinujando con Canvas</title>
</head>
<body>
    <h1>Dibujo en Canvas</h1>
    <canvas id="dibujito" width="300" height="300"></canvas>
    <p>asi queda tu Dibujo</p>
    <script src="dibujo.js"></script>
</body>
</html>>

Este es el JavaScript


<var hola = document.getElementById("dibujito");
var lienzo = hola.getContext("2d")
console.log(lienzo);    

lienzo.beginPath>

Alvilyn Bravo Lowe

student•hace 4 años

Después de probar todas sus sugerencias, me fijé que Freddy tiene en el HTML

y en el JS

var boton = document.getElementById("botoncito");

Es decir, en el HTML el id="boton" y el el JS el id="botoncito", (Son diferentes y por eso el JavaScript no lo encuentra, al mismo tiempo que la consola nos muestra el ERROR: ++Uncaught TypeError: Cannot read property 'addEventListener' of null++ El JS no puede llamar un evento que no reconoce o no consigue en le HTML).

Lo solucioné cambiando en el HTML el id por el mismo del JS:

HTML

<p> Cuántas lineas quieres <input type="text" id="texto_lineas" /> <input type="button" value="Enviar" id="**botoncito**" /> </p>

JS var texto = document.getElementById("texto_lineas"); var boton = document.getElementById("botoncito"); boton.addEventListener("click", dibujoPorClick);

Y listo, en el navegador me muestra el alert "No me toques ahi"

Hola, cada vez que intento dibujar sobre un canvas me sale "Uncaught TypeError: Cannot read property 'getContext' of null at archivo.js",

Curso Gratis de Programación Básica

Curso Gratis de Programación Básica