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 5

Link to post

Share on other sites

Ingolme 1,020

Link to post

Share on other sites

vmars316 5

Link to post

Share on other sites

vmars316 5

Link to post

Share on other sites

Join the conversation

Browse

Activity