CODEWITHSUNDEEP
javascripthtmlcanvas
Alexandru Stamp
Alexandru Stamp

Reputation: 13

Canvas HTML Error While Drawing On It

i have a problem while i render things on canvas. It's giving me the following error :

[17:05:28.636] TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement. @ file:///home/alex/Desktop/Game/index.html:24

var gameCanvas = document.getElementById("graphics");
var grafx = gameCanvas.getContext("2d");
var stele = new Object("../resources/sprites/enemy/enemyship1.png",500,500);
GameLoop();

function GameLoop(){

grafx.clearRect(0,0,gameCanvas.width,gameCanvas.height);
grafx.drawImage(stele.Sprite,stele.X,stele.Y);


setTimeout(GameLoop,1000/60);
}

function SteleMiscatoare(img,x,y) {
this.Sprite = new Image();
this.Sprite.src = img ;
this.X = x;
this.Y = y;

}

And HTML file :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>UFO Space Atack</title>
<link rel="stylesheet" style="text/css" href="data/stylesheet.css" />
</head>
<body onkeydown="keyDown(e)" onkeyup="keyUp(e)">
<div class="container">
    <h1 class="title">UFO Space Atack</h1>
</div>
<div class="canvascontainer" align="center">
    <canvas id="graphics" width="950px" height="490" id="graphics"></canvas>
</div>

<script src="data/stele.js"></script>

</body>
</html>

Can somebody help me to solve this ? Thank you ! Im beginer in JavaScript ...

Upvotes: 1

Views: 4974

Answers (1)

Levi
Levi

Reputation: 2113

var stele = new Object("../resources/sprites/enemy/enemyship1.png",500,500);

should be:

var stele = new SteleMiscatoare("../resources/sprites/enemy/enemyship1.png",500,500);

Upvotes: 1

Related Questions