animation - Animating canvas with a javascript constructor -

Hello Stack Overflow Community! First of all, I should say that I do not have much experience with the constructor. What am I trying to do, a parachuteist has to animate to fly from the top of the screen to the bottom. I thought I could use a constructor to install a parachuteist:

var parachute = function () {this.height = 35; This.width = 30; This.speed = 50; This.xPos = Math Plain (Math. Random) * (window.width - this.width)); This.animate = function () {this.img = new image (); this. Yos = 0; This.img.onload = function () {ctxPara.globalCompositeOperation = 'copy'; CtxPara.translate (0, this.yPos); CtxPara.drawImage (this.img, this.xPos, 0); }; This.img.src = 'para.png'; This.ypos ++; };

};

This constructor is used in a function called 'fly':

  var fly = function (var newParachute = new parachute (); Set Interval (New Topic, Animat, Nuperatupp.); };  

and this 'fly' function is triggered when the window is loaded:

  window.onload = function () {var canvasBg = document .getElementById ('canvasBg'); // I split the background and the parachuteist into two canvas elements / settling the problem (to remove the content and to draw new material) with // canvas animation. Var Kenvasapa = Document. GetElementById ('canvasapa'); CtxPara = canvasPara.getContext ('2d'); Canvas mercury.wind = window Wide; Canvas mercury.height = window height; CanvasBg.width = window.width; Canvas BG. Hight = window height; Fly(); Clouds (); // background is loading here};  

What you should see, a parachuteist is about to blow the screen. But unfortunately not you ... Now, after that long text (Iam is very sorry that it is too long :-() I have a question: do you know what I'm doing is wrong? Is my constructor right Is it? What am I trying to do, should be written like this? Suggestions for a successful success? (I hope my English is not terrible I think this is :-))

< P> Oh, I forgot to mention the error it's a TypeMissMatchError Means 'this.img' is not an IMG element on this line:

  ctxPara.drawImage (it .img, this.xPos, 0);  

Now, I followed the example of Mark E, instead of showing me a parachuteist, it shows me an error in this line: ctxPara.drawImage (this .img, this.xPos, this .yPos);

  var fly = function () {var newParachute = new parachute (); NewParachute.img.load.call (newParachute); Set invable (new top-up anime coal (new top), new parachute.); }; Var Parachute = function () {this.height = 35; This.width = 30; This.speed = 25; This.xPos = Math.round (Math.random () * (window.innerWidth - this.width)); This.img = new image (); this. Yos = 0; This.img.isLoaded = false; This.img.load = function () {this.img.isLoaded = true; }; This.img.src = 'Parachute Page'; This.animate = function () {if (this.img.isLoaded) {ctxPara.clearRect (0, 0, canvasapada, canvas paragraph HEIGHT); CtxPara.drawImage (this.img, this.xPos, this.yPos); // Error: 'unknown error' this.yPos ++; Console.log ('animating'); }}; };  

I'm stuck again. But now I do not even know the reason ... please help!

demo:

some issues:

(1 ) You can use it to get the width of the window:

  window.innerWidth  

(2) Set incoming call new paratatt.net.

  Set Interval (New Topic, Animate, NewParTup.);  

But animate the this window object - not the parachute object. You can use the call method to animate

var newParachute = new parachute (); SetInterval (function () {newParachute.animate.call (newParachute);}, newParachute.speed);

(3) You must deal with clearing the previously dragged images or they will still be visible on your canvas.