fabricjs

testing

by Alexander Lehmann

HTML

<body>
    <canvas id="c" width="500" height="400"></canvas>
</body>

JavaScript

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

function log(msg) {
    alert("log:"+msg);
}

var turtle = {
    canval: "",
    state: "down",
    pos: {x:canvas.getWidth()/2, y:canvas.getHeight()/2},
    heading: 0,

    up: function () {
        this.state="up";
    },
    
    down: function () {
        this.state="down";
    },
    
    forward: function ( length ) {
        var sx=Math.sin(this.heading/360*2*Math.PI);
        var sy=Math.cos(this.heading/360*2*Math.PI);
        var startpos={x:this.pos.x,y:this.pos.y};
        this.pos.x+=sx*length;
        this.pos.y+=sy*length;
        
        if(this.state=="down") {
            var line=new fabric.Line([startpos.x,startpos.y,this.pos.x,this.pos.y], { stroke: 'black' });
            canvas.add(line);
        }
        
    },

back: function (length) {
    this.forward(-length);
},

right: function (angle) {
    this.heading=(this.heading+angle)%360;
},

left: function (angle) {
    this.right(-angle);
},

    toString: function () {
        return "turtle at "+this.pos.x+","+this.pos.y+" heading "+this.heading;
    }
};

function draw(len) {
    if(len>5) {
        draw(len/3);
        turtle.left(60);
        draw(len/3);
        turtle.right(120);
        draw(len/3);
        turtle.left(60);
        draw(len/3);
    } else {
        turtle.forward(len);
    }
}

var edges=3;

turtle.up();
turtle.forward(100);
turtle.down();

for(i=0;i<edges;i++) {
    turtle.right(360/edges);
    draw(250);
}

fabric.log(turtle.toString());