Question

I’m trying to construct a base class Shape using Crockford’s inheritance pattern. Using this base Shape, I’m trying to draw a circle, a rectangle and a triangle. I’m kinda stuck. I didn’t know how to call/modify the base method

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

function Shape() {
    return {
            this.points: [ ],

    init : function(){
    if(typeof this.context === ‘undefined’){
            var canvas = document.getElementById(‘canvas’);
                var context = canvas.getContext(‘2d’);
            }
     },
     draw: function(){ 
             var context = this.context;
             context.beginPath();
             context.moveTo(this.points[0].x, this.points[0].y);
             for(var i=1; i< this.parameter.length; i++){
                context.lineTo(this.parameter[i].x, this.parameter[i].y);
             }
             context.closePath();
             context.stroke();
     }
};
}

function Circle(x, y, r){
var points = Shape();
    point.x = x;
    points.y = y;
    points.r = r; 
    var baseMethod = that.draw;
       that.draw = function(){
       /*how to modify the base method to draw circle*/
    };

}
function Rectangle(a, b, c, d){
var points = Shape();
    point.a = a;
    points.b = b;
    points.c = c;
    points.d = d 
    var baseMethod = that.draw;
       that.draw = function(){
       /*how to call base method to draw rectangle*/
    };

}

Answer 1

You’ve got quite a few problems going on with your code. Firstly you need to make sure you’ve got your basic drawing code working before moving on to more complicated shapes such as circles and rectangles. Start with drawing lines. I’ve tidied up your code and got it working with drawing straight lines:

//returns basic point object which has
//two properties x & y
function point(x, y) {
    return {
        x: x,
        y: y
    }
}


//function that returns a shape object with all the 
//mechanisms for drawing lines between points
function Shape(canvasID) {
    return {
        points: [], //not 'this.points' (which would most likely be window.points)
        addPoint: function(x, y) {//adding a point to a shape is an operation of shape
            this.points.push(point(x, y))
        },
        init: function() {
            if (typeof this.context === 'undefined') {
                var canvas = document.getElementById(canvasID);
                var ctx = canvas.getContext('2d');
                this.context = ctx; //add the context reference to the current shape object
            }
        },
        draw: function() {
            this.init();
            var context = this.context;
            context.beginPath();
            var that = this; //create a local reference to the current 'this' object.
            //insures us against any possible 'this' scope problems
            context.moveTo(that.points[0].x, that.points[0].y);
            for (var i = 1; i < that.points.length; i++) {
                context.lineTo(that.points[i].x, this.points[i].y);
            }
            context.closePath();
            context.stroke();
        }
    };
}

//Simple Line object - good for testing your
//basic drawing functionality
function Line(canvasID, x, y, x2, y2) {
    var shape = Shape(canvasID);
    shape.addPoint(x, y);
    shape.addPoint(x2, y2);
    shape.draw();

}

//Execute your drawing functionality after the 
//window has loaded to make sure all your objects exist before 
//trying to use them
window.onload = function() {
    Line('canvas', 100, 100, 200, 200);
}

I’m not necessarily sold on whether this is the best way to approach what you are doing – but DC’s basic approach is to create objects without having to use the “new” keyword. So he returns an object from a function call using the JavaScript object notation.

Now that you can draw a line, the next step is to draw a series of connected lines one after the other (a path). After that, create your rectangle. You need some code to tell your code where to start drawing the rectangle (the start x/y coordinate) and then you can have parameters denoting the height and width of the rectangle which will be used to calculate the coordinates of the rectangle’s corners and passed to the shape object to be drawn in the same way the series of connected lines were drawn. One caveat, though, is to check if there is some sort of ‘createRectangle’ function on the context object (and same for circle). I don’t actually know myself as I’ve not done this sort of work in HTML5/canvas – although I have in other environments.

Edit

Forgot to mention that you will need to make sure the doctype declaration of your html is html5. A lot of IDE’s will automatically declare your html as html4. Html5 just needs: <!DOCTYPE html>

Also, make sure you declare a canvas element in the html body, something like this:

<canvas id="canvas" width="300" height="150">   
   </canvas>