vmars316 5 Posted April 23, 2016 Report 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 Quote Link to post Share on other sites
Ingolme 1,020 Posted April 23, 2016 Report 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. Quote Link to post Share on other sites
vmars316 5 Posted April 23, 2016 Author Report 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 ? Quote Link to post Share on other sites
vmars316 5 Posted April 24, 2016 Author Report 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 Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.