vmars316 Posted April 23, 2016 Share Posted April 23, 2016 (edited) 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> <!-- http://liesandcowpies.com/javascript/ --> <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 Link to comment Share on other sites More sharing options...
Ingolme Posted April 23, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
vmars316 Posted April 23, 2016 Author Share Posted 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 ? Link to comment Share on other sites More sharing options...
vmars316 Posted April 24, 2016 Author Share Posted 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now