trying to animate on a javascript canvas

Question

as the title said i'm trying to animate on a java canvas but i'm not sure how to add on to the vector class of my objects current position I've been told to use this:

Bus.prototype.update = function()
{
    this.getPosition().add(new Vector(10.0));
}

but it doesn't recognize the .add function and comes up with an error when i use my setInterval function

I'll include my get/set functions aswell just incase

Bus.prototype.getPosition = function()  {       
    return this.mPosition;
};
Bus.prototype.setPosition = function (pPosition)    {
    this.mPosition = pPosition;
};

I'm pretty new at coding so i apologize if this is very vague or badly written

Lesson 1: http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java — Shomz, Nov 02 '15 at 22:40

score 0 · Answer 1 · answered Nov 04 '15 at 08:55

jsFiddle : https://jsfiddle.net/CanvasCode/41z9o10p/1/

javascript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var Bear = function(xSet, ySet)
{
    this.XPos = xSet;
    this.YPos = ySet;
}

Bear.prototype.updatePosition = function(xValue, yValue)
{
    this.XPos += xValue;
    this.YPos += yValue;
}

var bear = new Bear(0,0);

setInterval( function()
            {
    ctx.fillStyle = "#000";
    ctx.fillRect(0,0,c.width,c.height);
    ctx.fillStyle = "#0F0";
    ctx.fillRect(bear.XPos, bear.YPos, 50,50);

    bear.updatePosition(0.2, 0.4);
} ,1);

Bear is a custom "class". All bear has is a X position and a Y position, the constructor can take in two values which will set the X and Y value. I then add a new method to Bear which is called updatePosition. All updatePosition does it take in two values and add them to the original X position and Y position (you can also provide negative numbers to move the opposite way). Now with our Bear we can create one and then use its updatePosition function and move it.

trying to animate on a javascript canvas

1 Answers1