Canvas.setpenopacity(1);

const digitHeight = 40;
const digitWeight = 4;
const digitSpacing = 2*digitWeight;

const halfWeight = digitWeight/2;
const step = 0.05;
const segmentLength = (digitHeight-digitWeight-4*halfWeight)/2;
const digitWidth = 4*halfWeight + segmentLength + digitSpacing;
const semicolonWidth = 2*halfWeight+2*digitWeight;

Turtle.prototype.drawSegment = function() {
    this.pendown();
    for (let i = 0; i <= segmentLength; i+= step) {
        const left = this.clone();
        const right = this.clone();
        const angle = i < segmentLength/2 ? 45 : 135;
        left.left(angle);
        left.forward(halfWeight);
        right.right(angle);
        right.forward(halfWeight);
        this.forward(step);
    }
    this.penup();
}

Turtle.prototype.skipSegment = function() {
    this.penup();
    this.forward(segmentLength);
}

Turtle.prototype.drawDigit = function(d) {
    const x = this.x();
    const y = this.y();
    d = parseInt(d);
    this.penup();
    this.forward(halfWeight);
    ([0, 2, 3, 5, 6, 7, 8, 9].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
    this.forward(halfWeight);
    this.right(90);
    this.forward(halfWeight);
    ([0, 1, 2, 3, 4, 7, 8, 9].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
    this.forward(halfWeight);
    this.forward(halfWeight);
    ([0, 1, 3, 4, 5, 6, 7, 8, 9].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
    this.forward(halfWeight);
    this.right(90);
    this.forward(halfWeight);
    ([0, 2, 3, 5, 6, 8, 9].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
    this.forward(halfWeight);
    this.right(90);
    this.forward(halfWeight);
    ([0, 2, 6, 8].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
    this.forward(halfWeight);
    this.forward(halfWeight);
    ([0, 4, 5, 6, 8, 9].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
    this.backward(segmentLength+halfWeight);
    this.right(90);
    this.forward(halfWeight);
    ([2, 3, 4, 5, 6, 8, 9].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
    this.goto(x, y);
    this.forward(digitWidth);
}

Turtle.prototype.drawSemicolon = function() {
    const x = this.x();
    const y = this.y();
    const h = this.h();
    this.penup();
    this.forward(2*halfWeight);
    this.right(90);
    this.forward(segmentLength);
    for (let i = 0; i < halfWeight; i+=step) {
        this.pendown();
        this.circle(halfWeight-i);
        this.penup();
        this.right(90);
        this.forward(step/2);
        this.left(90);
    }
    this.left(90);
    this.forward(halfWeight/2);
    this.right(90);
    this.forward(segmentLength*0.75);
    for (let i = 0; i < halfWeight; i+=step) {
        this.pendown();
        this.circle(halfWeight-i);
        this.penup();
        this.right(90);
        this.forward(step/2);
        this.left(90);
    }
    this.goto(x, y);
    this.seth(h);
    this.forward(semicolonWidth);
}

Turtle.prototype.drawCurrentTime = function() {
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const hs = hours < 10 ? "0" + hours : "" + hours;
    const ms = minutes < 10 ? "0" + minutes : "" + minutes;
    hs.split('').map(d => this.drawDigit(d));
    this.drawSemicolon();
    ms.split('').map(d => this.drawDigit(d));
}

const turtle = new Turtle();
turtle.penup();
turtle.goto(-2*digitWidth, -digitHeight*0.5+halfWeight);
turtle.pendown();

function walk(i) {
    turtle.drawCurrentTime();
    return false;
}