Jump to content

Failed to execute 'drawImage' on 'CanvasRenderingContext2D' ?


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...