Typewriter - Working

Typewriter simulation using jQuery library. Print out 1 character at a time.

by Kev

HTML

<div id="view"></div>
<div id="canvas"></div>

CSS

body {
    width:100%;
    height:100%;
    background:yellow;
    overflow:hidden;
    font-family:Courier;
    font-size:100%;
}
#view {
    border: 2px solid black;
    width:100%;
    height:1.7em;
    z-index:10;
    position:absolute;
        bottom:0;
}
#canvas {
    position:absolute;
    bottom:0;
    height:27px;
     padding:0 .4em;
   
    line-height:1.6;
    width:100%;
    background:pink;
}
p {
    background:red;
    margin:0 0 0 .4em;
}
#menu {
    background: blue !important;
}

JavaScript

var userName = 'Ken',
    lineCount = 1,
    quote = "All work and no play makes " + userName + " a dull boy";

var delay = 60,
    canvas = $("#canvas");

function addTextByDelay(quote, canvas, delay) {
    var quote = quote;
    if (quote.length > 0) {
        canvas.append(quote[0]); //append first character 
        setTimeout(function () {
            //Slice text by 1 character and call function again                
            addTextByDelay(quote.slice(1), canvas, delay);
        }, delay);
    } else if (quote.length == quote) {
        canvas.css('background', 'lime');
        $('#canvas p:last-of-type').append(lineCount);
        typeWriterReturn();
        lineCount++;
        //  alert(lineCount);
        return lineCount;
    }
}

function addLine(lineCount) {
    $('#canvas').append('<p></p>');
    if (lineCount == 1) {
        // alert(lineCount + ' <<<< 2');
    }
    addTextByDelay(quote, $('#canvas p:last-of-type'), delay);
    $('#canvas p:last-of-type').css('background', 'orange');
}

addLine(lineCount);
//   addTextByDelay();

function typeWriterReturn() {
    var curHeight = parseInt(canvas.css('height'));
    var curLineHeight = parseInt(canvas.css('line-height'));
    var curMarginTop = parseInt(canvas.css('margin-top'));

    if (lineCount < 100) {
        if (lineCount <= 5) {
            setTimeout(function () {
                addLine(lineCount);
                delay = delay / 2;
            }, delay * 5);
        }
        if (lineCount > 5 && lineCount <= 10) {
            setTimeout(function () {
                addLine(lineCount);
                delay = delay / 20;
            }, delay / 20);
        }
        if (lineCount > 10 && lineCount <= 30) {
            delay = 0;
            addLine(lineCount);
        }
        if (lineCount > 30) {
            for(var i = 0; i < 10; i++) {
               setTimeout(function () {
               canvas.css({
        'bottom': '+=' + 25.4
    });
            }, delay / 20); 
    
     ...