Jump to content

Failed to execute 'drawImage' on 'CanvasRenderingContext2D' ?


vmars316

Recommended Posts

Hello & Thanks ,

I am getting this error:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

 

on this line:

         ctx.drawImage(cowpies[i], cowpies[i].x, cowpies[i].y, cowpies[i].width, cowpies[i].height); 
 

I got no error msg from the 'onload' .

Haven't figured out what I am doing wrong .

Pls , take a look .

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8" />
<title>move pieThrower</title>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
#assets {
visibility: hidden;
}
</style>
</head>
<body onload="startGame()">
<div align="center">
<table style="text-align: left; width: 100%;" border="0"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="width:70%";><p id="traceMsg">traceLog goes here:</p>
</td>
<td style="width:30%";> <canvas id="canvas" width="300" height="300"></canvas>
</td>
</tr>
</tbody>
</table>
</div>
<div id="assets">
<img id="cowpie" src="sprites/cowpie.png" width="32" height="32" />
</div>
<script type='text/javascript'>
//
var firstTimeInCowpieUpdate = true ; var watchi = 0;
canvas = document.getElementById("canvas"); // get the canvas
ctx = canvas.getContext('2d'); // create canvas Context;
var cowpies = [document.getElementById("cowpie")];
//
var Cowpie = function () {
var self = this;
this.idTag = 'cowpie';
this.idActive = true ;
this.x = 150;
this.y = 150;
this.width= 64;
this.height = 64;
this.speedX = 0;
this.speedY = 5;
this.visible = true;
this.directionY = -1;
this.moveMe = false ;
}
//
Cowpie.prototype.update = function() {
alert("cowpie.update " + watchi + " 0 cowpies.length= " + cowpies.length);
}
//
var cowpie = new Cowpie();
//
function startGame() {
watchi = 0 ;
alert(i + "1 cowpies.length= " + cowpies.length);
cowpies.push(new Cowpie);
document.getElementById("traceMsg").innerHTML = cowpies[0];
for (var i = cowpies.length - 1; i >= 0; i--) {
watchi = i;
alert(i + " 2 cowpies.length= " + cowpies.length);
if (!cowpies.idActive) { cowpies.splice(i,1);
alert(i + " 3 !cowpies.idActive= " + cowpies.idActive)}
if (cowpies.idActive) {alert(i + " 4 cowpies.idActive= " + cowpies.idActive)}
cowpies.push(cowpie =new Cowpie); // add cowpie
ctx.drawImage(cowpies, cowpies.x, cowpies.y, cowpies.width, cowpies.height);
alert(i + " 5 cowpies.length= " + cowpies.length);
//
} // for (var i =
}
//
//
</script>
</body>

 

</html>



			
				


	Edited  by vmars316
	
	

			
		
Link to comment
Share on other sites

The error message is saying that cowpies is not an image element. You can only draw image elements onto the canvas.

 

When you called cowpies.push(new Cowpie); you added something that was not an image to the array, which caused this error.

Link to comment
Share on other sites

Thanks ,

Yes , I am having difficulty with the distinction between


1) cowpie the image (cowpie.png)

2) var cowpie = new Cowpie();

3) var cowpies = [document.getElementById("cowpie")];


I haven't worked with multiple copies of an image , along with multiple copies of same definition .


It looks like I need two arrays ,

one for multiple cowpie.png's

and one for the definitions of each of the cowpie.png


Is that correct ?

Link to comment
Share on other sites

Oh , ok , I get it .

 

function startGame() {
canvas = document.getElementById("canvas"); // get the canvas
ctx = canvas.getContext('2d'); // create canvas Context;
ctx.drawImage(cowpieImg, 150, 150);
ctx.drawImage(cowpieImg, 150, 200, 64, 64);
} // EndOf function startGame()
Thanks
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...