未捕获的TypeError：cuadrito.getContext在eventos.js：10处不是函数

由 发布于

I'm new to coding and I was trying to do a draw with canvas markup, I reviewed the code 10 times, I tried to fix the object method, by var papel = cuadrito.canvas.getContext("2d"); but it didn't work

var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};

document.addEventListener("keyup", dibujarTeclado);
var cuadrito = document.getElementById("areaDeDibujo");
var papel = cuadrito.getContext("2d")
//here is were the error appears as Uncaught TypeError: cuadrito.getContext is not a function at eventos.js:10

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal,lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth= 3;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
};

dibujarLinea("red", 100, 100, 200, 200, papel);

我需要帮助。

这是HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dibujando con flechas
    </title>
  </head>
  <body>
    <canvas width="300" height="300"></canvas>
    <p> Mueve las flechas para dibujar </p>
   <script src="eventos.js" id="areaDeDibujo"></script>
  </body>
</html>