Javascript class properties always undefined

in my following class definition my width, height, columns etc. are always undefined when calling my drawElipse method.

However in my page I set all the properties.

$(document).ready(function() {
    var element = $('#positioning_canvas');
    element.click(scientificBox.click);
    scien开发者_JS百科tificBox.columns = 9;
    scientificBox.rows = 9;
    scientificBox.canvas = element.get(0);
    etc.

How to solve this?

var scientificBox = new function () {
var aliquotHeight;
var aliquotWidth;

this.width = 500;
this.height = 500;
this.columns = 9;
this.rows = 9;
this.canvas = null;
this.imageRoot = "";

var drawElipse = function (ctx, x, y, w, h) {
    var kappa = .5522848;
    var ox = (w / 2) * kappa;  // control point offset horizontal
    var oy = (h / 2) * kappa; // control point offset vertical
    var xe = x + w;           // x-end
    var ye = y + h;           // y-end
    var xm = x + w / 2;       // x-middle
    var ym = y + h / 2;       // y-middle

In the following code snippet I have created a class named ScientificBox with two properties and one method (I'm not quite sure if this is the solution that you are asking for).

    function ScientificBox() {
        this.width = 9;
        this.height = 9;

        this.drawElipse = function () {
            alert(this.width * this.height);
        }
    }

You can call this class then by the following code:

    var box= new ScientificBox();
    box.drawElipse();

I've tested this and it works. Maybe this is the solution that you are looking for?

Best regards.

Edit: I've forgot to mention to show a code example of setting properties on the class.

    var test = new ScientificBox();
    test.width = 12;
    test.height = 2;
    test.drawElipse();