Bresenham

by KodeKreachor

HTML

<div class="signatureLabel">Signature Area</div>
    <div class="signatureBox"></div>
    <div class="dataPointsLabel">Generated Data Points</div>
    <textarea class="dataPointsBox"></textarea>
    <div class="dataPointsLoadLabel">Load Your Own Data Points</div>
    <textarea class="dataPointsLoadBox"></textarea>
    <input type="button" class="clearButton" value="CLEAR" />
    <input type="button" class="undoButton" value="UNDO" />
    <input type="button" class="loadButton" value="LOAD" style="top: 266px; left: 999px;" />
    <input type="button" class="loadButton" id="loadButton1" value="Load Eric's signature" style="top: 315px; width: 175px; left: 895px;" />
    <input type="button" class="loadButton" id="loadButton2" value="Load Fun Message :)" style="top: 342px; width: 175px; left: 895px;" />
    <div class="animateCheckboxDiv"><input type="checkbox" class="animateCheckbox" />Load w/ animation</div>

CSS

.signatureLabel,
        .dataPointsLabel,
        .dataPointsLoadLabel
        {
            position: absolute;
            top: 36px;
            color:Blue;
            font-size:14pt;
            font-family:Century Gothic;
        }
        
        .signatureLabel
        {
            left: 108px;
        }
        .signatureBox
        {
            position: relative;
            top: 52px;
            left: 100px;
            height: 200px;
            width: 500px;
            border: solid 1px red;
            cursor: pointer;
        }
        .dataPointsLabel
        {
            left: 625px;
        }
        .dataPointsBox
        {
            position: absolute;
            top: 60px;
            left: 625px;
            height:203px;
            width: 217px;
        }
        .dataPointsLoadLabel
        {
            left: 856px;
        }
        .dataPointsLoadBox
        {
            position: absolute;
            top: 60px;
            left: 855px;
            height:203px;
            width: 217px;
        }
        .clearButton
        {
            position: absolute;
            top: 264px;
            left: 535px;
            width: 75px;
        }
        .undoButton
        {
            position: absolute;
            top: 264px;
            left: 453px;
            width: 75px;
        }
        .loadButton
        {
            position: absolute;
            width: 75px;
        }
        .animateCheckbox
        {
        }   
        .animateCheckboxDiv
        {           
            position: absolute;
            left: 851px;
            top:270px;
            color:Blue;
            font-size:10pt;
            font-family:Century Gothic;
        }

JavaScript

var ericsSignature...