CODEWITHSUNDEEP
html
Richard
Richard

Reputation: 351

Got some trouble with canvas in html5

I don't know where my code is broken. Why my context is not recognized in my script?

I have trouble in this line : this.context = this.canvas.getContext("2d");

Error message : Uncaught TypeError: this.canvas.getContext is not a function

I'd like to know why my canvas doses not recognize? Could you give me an advice?

var myGameArea = {
    canvas : document.getElementById("canvas_screen"),
    start : function() {
        this.context = this.canvas.getContext("2d");
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
  logger : function() {
    alert("log---");  
  }
}

Upvotes: 0

Views: 44

Answers (1)

Gautam Kumar
Gautam Kumar

Reputation: 53

I tried your code in both Google chrome and Mozilla Firefox browser, but it seems to work fine.

Below is the code I tried:

<html>
<head>
    <script type="text/javascript">
       var myGameArea = {
      canvas : document.getElementById("canvas_screen"),
      start : function() {
        this.context = this.canvas.getContext("2d");
        this.interval = setInterval(updateGameArea, 20);
      },
      clear : function() {
        this.context.clearRect(0, 0, this.canvas.width,  this.canvas.height);
     },
     logger : function() {
     alert("log---");  
    }
  }
   </script>
</head>
<body>
  <canvas id="canvas_screen" style="z-index:0;background-color:#000000;  position:fixed;top:20%;left:2%;">
</body>

</html>

Upvotes: 1

Related Questions