Why does it say that the method draw doesn't exists for my object "ball"?

Question

Here is my code :

    <!DOCTYPE html>
    <html>
      <head>
        <title>Touch Tracker Marker</title>
        <meta name="viewport" content="width=device-width, user-scalable=no">
    <style type="text/css">
    body { margin: 0px; overflow: hidden; }
    canvas { border: 1px solid black; }
    </style>
    <script type="text/javascript" src="magictouch.js"></script>
    <script type="text/javascript">

    var canvas;
    var ctx;
    var w = 0;
    var h = 0;

    var timer;
    var updateStarted = false;
    var touches = [];
    var balles= [];
    function  ball(x,y){
        this.x=x;
        this.y=y;
        function draw(){
            ctx.beginPath();
            ctx.arc(this.x, this.y, 20, 0, 2*Math.PI, true);

            ctx.fillStyle = "rgba(0, 0, 200, 0.2)";
            ctx.fill();

            ctx.lineWidth = 2.0;
            ctx.strokeStyle = "rgba(0, 0, 200, 0.8)";
            ctx.stroke();
        }
    };

    function update() {
        if (updateStarted) return;
        updateStarted = true;

        var nw = window.innerWidth;
        var nh = window.innerHeight;

        if ((w != nw) || (h != nh)) {
            w = nw;
            h = nh;
            canvas.style.width = w+'px';
            canvas.style.height = h+'px';
            canvas.width = w;
            canvas.height = h;
        }

        ctx.clearRect(0, 0, w, h);

        var i, len = touches.length;
        for (i=0; i<len; i++) {
            var touch = touches[i];
        var px = touch.pageX;
        var py = touch.pageY;

        b = new ball(px,py);
        b.draw();

        console.log('drawn circle at ' + px +',' + py);
        }

        updateStarted = false;
    }

    function ol() {
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        timer = setInterval(update, 15);

    canvas.addEventListener('touchend', function() {
        ctx.clearRect(0, 0, w, h);
    });

    canvas.addEventListener('touchmove', function(event) {
      event.preventDefault();
      touches = event.touches;
    });

    canvas.addEventListener('touchstart', function(event) {
      console.log('start');
    });
    };

    </script>
    </head>
    <body onload="ol()">

    <canvas id="canvas" width="300" height="300" style="top:0px; left:0px; width: 300px; height: 300px;"></canvas>

    </body>
    </html>

odedsh · Accepted Answer · 2014-02-15T12:37:49.813

3

shouldn't it be:

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

ball.prototype.draw = function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, 20, 0, 2*Math.PI, true);

        ctx.fillStyle = "rgba(0, 0, 200, 0.2)";
        ctx.fill();

        ctx.lineWidth = 2.0;
        ctx.strokeStyle = "rgba(0, 0, 200, 0.8)";
        ctx.stroke();
}

You add the function draw to ball.prototype effectively adding it to all objects of type ball

EDIT: In the link you provided in the comments w3schools added a function in this way:

function  ball(x,y){
    this.x=x;
    this.y=y;
    function myFunc() { ... }
    this.draw= myFunc;
};

Basically every time you call ball it creates a function object and attaches it to the instance of ball under the name draw. This works as well but I'd still go with using the prototype which is the proper way to define methods in javascript.

Adding the function to the prototype makes the single function available to all instances of ball instead of creating a new function object for each ball.

edited Feb 15 '14 at 12:37

answered Feb 15 '14 at 11:49

odedsh

2,594
17
17

Yes, thank you, that way it works. But it's strange, because they said in W3school, that we can declare a method as I've done : http://www.w3schools.com/js/js_objects.asp – nonozor Feb 15 '14 at 12:03
1

What they did is add the method onto the object manually: `this.draw = draw` So the method pointer is added onto each object in the ctor. That really is a hack. Methods should be attached to the prototype and not individually to each instance – odedsh Feb 15 '14 at 12:27
1

@nonozor adding shared members (like functions that behave the same) to the prototype saves memory and cpu when you create many objects. It also makes it easier to inherit and extend functions from Parent. More info about prototype and constructor functions can be found here: http://stackoverflow.com/a/16063711/1641941 – HMR Feb 15 '14 at 15:15

Why does it say that the method draw doesn't exists for my object "ball"?

1 Answers1