Canvas Drawing/Animation

I am trying to learn how to write good, clean, and efficient JavaScript. I consider myself a novice, at best, in JavaScript. Any comments are appreciated.

In an effort to become a better JavaScript programmer, I am trying to write a simple JavaScript animation using HTML5's new canvas element. Functionally speaking, when the canvas is clicked, a new circle (or Ball) is added to the canvas and begins moving to the lower right corner of the canvas. When the ball hits a wall or collides with another ball, the speed at which the x and y coordinates are moving is inverted.

Is it a good idea to be modifying the this object? For instance does the following pattern make sense?

function Point(I) {
    this.x = I.x;
    this.y = I.y;
    this.z = I.z;
    return this;
}

Is there any reason why I shouldn't be sending a object and pulling variables off of the input object? I like the syntax for creation, but are there any problems with this pattern?

new Point({
    x: 10,
    y: 30
});
new Point({
    x: 50,
    y: 25
    z: 3
});

Full Code

```

Ball Collision

window.onload = function () {
//"use strict";

// Source: http://www.html5rocks.com/tutorials/canvas/notearsgame/
Number.prototype.clamp = function(min, max) {
return Math.min(Math.max(this, min), max);
};

if (Modernizr.canvas) {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');

canvas.width = 500;
canvas.height = 375;
canvas.style.border = "3px solid red";

function Point(I) {
console.log("Point created");
this.x = I.x;
this.y = I.y;
this.z = I.z;
return this;
}

function Ball(I) {
console.log("Ball created");

var SPEED_LIMIT = 10;

this.point = new Point(I.point);
this.

Is it a good idea to be modifying the this object? For instance does the following pattern make sense?

function Point(I) {
    this.x = I.x;
    this.y = I.y;
    this.z = I.z;
    return this;
}

Yes and no. Modifying this is normal in a constructor function, but what you're doing here is unusual. Something like this would be more common:

function Point(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
}

With this parameter list, it's very clear what we are passing in (3D coordinates); with just I, it's not clear unless we read the code in the constructor. Not a huge deal here, but with Ball, we have no clue what I is supposed to contain unless we read the entire constructor.

There's no reason to return this; you're invoking it with new, and the result of that expression will be the constructed object. The function doesn't need to return anything.


Is there any reason why I shouldn't be sending a object and pulling variables off of the input object? I like the syntax for creation, but are there any problems with this pattern?

There's nothing wrong with it, but since your Point doesn't do anything (i.e. it has no function properties, only x, y and z) you might as well forget about Point and just use object literals if you're passing object literals to the Point constructor anyway. In other words, you're creating an object literal and then copying all of its properties into something that happens to be called a "Point" but aside from that has the exact same capabilities as the object you passed into the constructor. Why do that extra step?

With Ball, you should attach function properties to Ball.prototype rather than assign them inside of the constructor. There is no reason for each Ball object to have its own separate set of function properties, and doing so incurs extra overhead. In other words, with your code someBall.draw != anotherBall.draw, but it would be much more efficient if all balls reference the same draw function property.

StackExchange Code Review Q#1940, answer score: 7