Failed to execute 'drawImage' on 'CanvasRenderingContext2D' ?

vmars316 · April 23, 2016

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);

//

// http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_splice1

} // for (var i =

}

//

//

</script>

</body>

</html>

Edited April 23, 2016 by vmars316

Ingolme · April 23, 2016

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.

vmars316 · April 23, 2016

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 ?

vmars316 · April 24, 2016

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

Sign In

Failed to execute 'drawImage' on 'CanvasRenderingContext2D' ?

Recommended Posts

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity