webdevRefinery Forum: js error received when using drawImage() in canvas - webdevRefinery Forum

Hide message

Show message

Welcome!

Mean coders suck. Learn from nice ones.

Join up (it's free!) whether you're just starting out or you're crazy advanced. Get tips from people who know what they're talking about, without being treated like the playground smelly kid. Because seriously, your school classes didn't teach you anything you wanted to know.

Hide message

View New Content
Pick a background

Cartoon Clouds Mountains Sunrise Clouds Green Clouds None

Page 1 of 1

You cannot start a new topic
You cannot reply to this topic

Rate Topic:

snowcap

Group: Members
Posts: 3
Joined: 23-March 12
LocationSD, CA
Expertise:HTML,CSS,Java,Javascript

Posted 23 March 2012 - 11:51 PM (#1)

js error received when using drawImage() in canvas

Hello all,

Below, I create a constructor for 'Player' object, and then add a method 'draw', by using prototype.
In Player.draw(), I use drawImage, to well... draw an image. I keep receiving this error...

The type of an object is incompatible with the expected type of the parameter associated to the object.

function Player(imgsrc, x, y, w, h) {
    var that = this;
    that.image = new Image();
    that.image.src = imgsrc; // set image for player
    //alert(that.image.src);
    that.X = x;
    that.Y = y;
    that.width = w;
    that.height = h;
}

Player.prototype = {
    draw : function(context) {
        context.drawImage(this.image, 0, 0); // Problem is here
    }
}

Thank you in advance,

snowcap

Snowcap

arronhunt

I'm a httpster

Group: Moderators
Posts: 3398
Joined: 09-March 10
LocationLos Angeles, CA
Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 24 March 2012 - 12:21 AM (#2)

Not sure the problem, but I was wondering why you are doing

var that = this;

DO NOT OPEN THIS

Spoiler

Daniel15

dan.cx

Group: Moderators
Posts: 3415
Joined: 17-April 10
LocationMelbourne, Australia
Expertise:HTML,CSS,PHP,Java,Javascript,Node.js,SQL

Posted 24 March 2012 - 03:36 AM (#3)

What browser are you using?

Also I'd try change all "that" to "this" as Arron mentioned.

Daniel15! :D

Repeat after me: jQuery is not JavaScript. It is not the answer to every JavaScript-related question. When you have to write some JavaScript, do not instantly react with "Oh, I'll do that with jQuery!"

Spoiler

javascript:alert((''+[][[]])[!+[]+!+[]]+(![]+[])[+!+[]]+(''+!+[]/[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(''+!![])[+!+[]+!![]+!![]]+(![]+[])[!+[]+!+[]]+(+!+[])+(!+[]+!+[]+!+[]+!+[]+!+[]))

Kyek, on 16 November 2011 - 11:14 AM, said:

Daniel15 is ruining my life D:

markbrown4, on 12 October 2012 - 03:02 AM, said:

When i grow up I want to be a Daniel15.

snowcap

Group: Members
Posts: 3
Joined: 23-March 12
LocationSD, CA
Expertise:HTML,CSS,Java,Javascript

Posted 24 March 2012 - 04:15 PM (#4)

arronhunt, on 24 March 2012 - 12:21 AM, said:

Not sure the problem, but I was wondering why you are doing

var that = this;

I thought in the prototype function, 'this' would be referring to a different object, so I was going to use 'that', but I was wrong. Then I forgot to change the constructor.
It still won't compile =(

Daniel15 said:

What browser are you using?

I am using Firefox. In Chrome I receive error: "Uncaught TypeError: Type error"; same line.

Snowcap

Daniel15

dan.cx

Group: Moderators
Posts: 3415
Joined: 17-April 10
LocationMelbourne, Australia
Expertise:HTML,CSS,PHP,Java,Javascript,Node.js,SQL

Posted 24 March 2012 - 07:36 PM (#5)

Could you also post the code where you instantiate the Player?
If you're drawing it right after creating it, it probably won't work. You need to wait for the image to load before trying to use it. Either have it load in a hidden <div> on your page, or attach an onload handler to the image. This is documented on the Canvas tutorial - Using images page on MDN.

Daniel15! :D

Spoiler

javascript:alert((''+[][[]])[!+[]+!+[]]+(![]+[])[+!+[]]+(''+!+[]/[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(''+!![])[+!+[]+!![]+!![]]+(![]+[])[!+[]+!+[]]+(+!+[])+(!+[]+!+[]+!+[]+!+[]+!+[]))

Kyek, on 16 November 2011 - 11:14 AM, said:

Daniel15 is ruining my life D:

markbrown4, on 12 October 2012 - 03:02 AM, said:

When i grow up I want to be a Daniel15.

snowcap

Group: Members
Posts: 3
Joined: 23-March 12
LocationSD, CA
Expertise:HTML,CSS,Java,Javascript

Posted 24 March 2012 - 10:20 PM (#6)

Thank you for the info about pre-loading images, I added a pre-loader to the app. I still receive the same error. I instantiate Player here...

window.onload = function() {
    var imagesArray = ["images/ships.jpg"];
    
    var loader = new ImagePreloader(imagesArray, function(allImages, numOfLoaded) {
        var ghub = new gHub(800,600,"c"); // background added to the canvas
        var player = new Player(allImages[0], ghub.width / 2, ghub.height / 2, 100, 100); // Player object instantiated
        var c = document.getElementById(ghub.el); // canvas element
        var ctx = c.getContext("2d"); // context
        c.width = ghub.width; // width of the canvas
        c.height = ghub.height; // height of the canvas
        gameCycle.GameLoop(ctx, "#777777", c.width, c.height, player.draw, 0, 0); // GameLoop begins
    });
}

Snowcap

Renegade

418 I'm a teapot

Group: Members
Posts: 748
Joined: 08-March 10
Expertise:HTML,CSS,PHP,Javascript,Node.js,SQL,Graphics

Posted 25 March 2012 - 07:10 AM (#7)

The only problem that I could see was the order of execution. When I tried creating a new instance before defining player which would be expected. I can't really see anything else wrong with the code provided. http://jsfiddle.net/renegade/U9fPk/

Are you sure you're providing a

context

object?

http://adriancooney.ie ₪ Github ₪ Twitter ₪ Dribbble ₪ Forrst
We all die. The goal isn't to live forever. The goal is to create something that will.

Array(16).join({}-{}) + " Batman!";