Edit in JSFiddle

Result
JavaScript
HTML
CSS

var Deck = function () {};
Deck.prototype.gather = function () {
    Deck.prototype.Deck = new Array();
    for (var suit = 0; suit < 4; suit++) { //Add all cards
        for (var rank = 0; rank < 13; rank++) {
            var c = new Card();
            c.init(suit, rank);
            this.add(c);
        }
    }
};
Deck.prototype.add = function (Card) {
    this.Deck.push(Card);
};
Deck.prototype.shuffle = function () {
    var i = this.Deck.length,
        j, tempi, tempj;
    if (i == 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        tempi = this.Deck[i];
        tempj = this.Deck[j];
        this.Deck[i] = tempj;
        this.Deck[j] = tempi;
    }
};
Deck.prototype.topCard = function () {
    var current = this.Deck.pop();
    current.get();
    return current;
};

var Card = function () {};
Card.prototype.suit = 0;
Card.prototype.rank = 0;
Card.prototype.suits = ['Hearts', 'Diamonds', 'Clubs', 'Spades'];
Card.prototype.ranks = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
Card.prototype.init = function (suit, rank) {
    this.suit = suit;
    this.rank = rank;
};
Card.prototype.get = function () {
    //console.log(this.ranks[this.rank], 'of', this.suits[this.suit]);
};
Card.prototype.getNamedSuit = function () {
    return this.suits[this.suit];
}
Card.prototype.getSuit = function () {
    return this.suit;
};
Card.prototype.getNamedRank = function () {
    return this.ranks[this.rank];
}
Card.prototype.getRank = function () {
    return this.rank;
};

var Felt = function () {};
Felt.prototype.count = 0;
Felt.prototype.drawcard = function (Card) {
    canv = document.getElementById("canvas");
    ctx = canv.getContext("2d");
    var cardx = Card.rank;
    var cardy = Card.suit;

    var x = 123 * this.count;
    var y = 0;
    var cardImage = new Image();
    cardImage.onload = function () {
        ctx.drawImage(cardImage, 125 * cardx, 181 * cardy, 125, 180, x, y, 100, 160);
    }
    cardImage.src = 'https://raw.githubusercontent.com/alanmonger/alanmonger.github.io/master/assets/poker/cards.gif';
    this.count++;
};

var Hand = function (cards) {
    Hand.prototype.hand = cards;
};
Hand.prototype.fourOfAKind = function (arr) {
    if (arr[0].length == 2) { //Could also be four of a kind
        for (cardRankCount in arr[1]) {
            if (arr[1][cardRankCount] == 4) {
                return 1;
            }
        }

    }
    return 0;
}
Hand.prototype.fullHouse = function (arr) {
    if (arr[0].length == 2) { //Could also be four of a kind
        for (cardRankCount in arr[1]) {
            if (arr[1][cardRankCount] == 2) {
                return 1;
                break;
            }
        }

    }
    return 0;
}
Hand.prototype.threeOfAKind = function (arr) {
    if (arr[0].length == 3) { //Could also be three of a kind
        for (cardRankCount in arr[1]) {
            if (arr[1][cardRankCount] == 3) {
                return 1;
            }
        }
    }
    return 0;
}
Hand.prototype.twoPair = function (arr) {
    if (arr[0].length == 3) { //Could also be three of a kind
        for (cardRankCount in arr[1]) {
            if (arr[1][cardRankCount] == 2) {
                return 1;
            }
        }
    }
    return 0;
}
Hand.prototype.pair = function (arr) {
    if (arr[0].length == 4) {
        return 1;
    }
    return 0;
}
Hand.prototype.flush = function () {
    var flushSuit = 0;
    var flush = 1;
    for (curCard in this.hand) {
        if (curCard == 0) {
            flushSuit = this.hand[curCard].suit;
            continue;
        }
        if (this.hand[curCard].suit != flushSuit) {
            flush = 0;
            break;
        }
    }
    if (flush) {
        return 1;
    }
    return 0;
};
Hand.prototype.straight = function (arr) {
    if (arr[1].length != 5) return 0;
    var sorted = arr[0].sort(function (a, b) {
        return a - b
    });
    var lastnum = 0;
    var straightCount = 1; // Offset by 1 because the first element isn't counted

    for (item in sorted) {
        var thisnum = sorted[item];
        if (item == 0) {
            lastnum = sorted[item]
            continue;
        }

        if (thisnum == (lastnum + 1)) {
            lastnum = thisnum;
            straightCount++;
        } else {
            break;
        }
    }

    if (straightCount == 5) {
        return 1;
    }
    return 0;
};

var Dealer = function () {};
Dealer.prototype.count = 0;
Dealer.prototype.totalFlushes = 0;
Dealer.prototype.totalPair = 0;
Dealer.prototype.totalTwoPair = 0;
Dealer.prototype.totalFullHouse = 0;
Dealer.prototype.totalFourOfAKind = 0;
Dealer.prototype.totalStraight = 0;
Dealer.prototype.totalThreeOfAKind = 0;

Dealer.prototype.deal = function (numOfCards) {
    Dealer.prototype.hand = new Array();
    var deal = new Deck();
    deal.gather();
    deal.shuffle();

    var table = new Felt();
    for (i = 1; i <= numOfCards; i++) {
        current = deal.topCard();
        this.hand.push(current);
        table.drawcard(current);
    }
    this.count++;
};
Dealer.prototype.getCount = function () {
    return this.count;
}

Dealer.prototype.cardRankArray = function () {
    var arr = new Array();
    for (item in this.hand) {
        arr.push(this.hand[item].getRank());
    }
    var a = [],
        b = [],
        prev;

    arr.sort();
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] !== prev) {
            a.push(arr[i]);
            b.push(1);
        } else {
            b[b.length - 1]++;
        }
        prev = arr[i];
    }
    return [a, b];
}
Dealer.prototype.check = function () {

    Dealer.prototype.totalStraightFlush = 0;
    Dealer.prototype.totalFlush = 0;
    Dealer.prototype.totalPair = 0;
    Dealer.prototype.totalTwoPair = 0;
    Dealer.prototype.totalFullHouse = 0;
    Dealer.prototype.totalFourOfAKind = 0;
    Dealer.prototype.totalStraight = 0;
    Dealer.prototype.totalThreeOfAKind = 0;
    Dealer.prototype.totalRoyalFlush = 0;
    Dealer.prototype.totalHighCard = 0;

    var check = new Hand(this.hand);

    var flush, pair, twoPair, fullHouse, fourOfAKind, straight, threeOfAKind = 0;

    flush = check.flush(this.cardRankArray());
    pair = check.pair(this.cardRankArray());
    twoPair = check.twoPair(this.cardRankArray());
    fullHouse = check.fullHouse(this.cardRankArray());
    fourOfAKind = check.fourOfAKind(this.cardRankArray());
    straight = check.straight(this.cardRankArray());
    threeOfAKind = check.threeOfAKind(this.cardRankArray());

    if (!flush && !pair && !twoPair && !fullHouse && !fourOfAKind && !straight && !threeOfAKind) {
        this.totalHighCard++;
    } else {

        this.totalPair += pair;
        this.totalTwoPair += twoPair;
        this.totalFullHouse += fullHouse;
        this.totalFourOfAKind += fourOfAKind;
        this.totalThreeOfAKind += threeOfAKind;

        if (flush && straight) {
            var cards = this.cardRankArray()[0];
            var aceFound = 0;
            for (item in cards) {
                if (cards[item] == 12) {
                    aceFound = 1;
                    break;
                }
            }

            if (aceFound) {
                this.totalRoyalFlush++;
            } else {
                this.totalStraightFlush++;
            }
        } else {
            this.totalStraight += straight;
            this.totalFlush += flush;
        }
    }
};
Dealer.prototype.getTotalFlushes = function () {
    return this.totalFlush;
}
Dealer.prototype.getTotalPair = function () {
    return this.totalPair;
}
Dealer.prototype.getTotalTwoPair = function () {
    return this.totalTwoPair;
}
Dealer.prototype.getTotalFullHouse = function () {
    return this.totalFullHouse;
}
Dealer.prototype.getTotalFourOfAKind = function () {
    return this.totalFourOfAKind;
}
Dealer.prototype.getTotalStraight = function () {
    return this.totalStraight;
}
Dealer.prototype.getTotalThreeOfAKind = function () {
    return this.totalThreeOfAKind;
}
Dealer.prototype.getTotalRoyalFlush = function () {
    return this.totalRoyalFlush;
}
Dealer.prototype.getTotalStraightFlush = function () {
    return this.totalStraightFlush;
}
Dealer.prototype.getTotalHighCard = function () {
    return this.totalHighCard;
}
Dealer.prototype.calculatePercentage = function (field) {
    return ((field / this.count) * 100).toFixed(4) + '%';
};
Dealer.prototype.updateTable = function (id, val) {
    var percentage = this.calculatePercentage(val);
    var bar = ((val) / (this.getCount()) * 100 + '%');
    $('#' + id).html(val);

    $('#' + id + 'Percentage').html(percentage);
    $('.' + id).css('width', bar);
    //alert('pair');
    //return document.getElementById(id).innerHTML = val;
};



var alan = new Dealer();

setInterval(function () {
    alan.deal(5);
    alan.check();
    alan.updateTable('count', alan.getCount());
    alan.updateTable('royalFlush', alan.getTotalRoyalFlush());
    alan.updateTable('straightFlush', alan.getTotalStraightFlush());
    alan.updateTable('fourOfAKind', alan.getTotalFourOfAKind());
    alan.updateTable('fullHouse', alan.getTotalFullHouse());
    alan.updateTable('flush', alan.getTotalFlushes());
    alan.updateTable('straight', alan.getTotalStraight());
    alan.updateTable('threeOfAKind', alan.getTotalThreeOfAKind());
    alan.updateTable('twoPair', alan.getTotalTwoPair());
    alan.updateTable('pair', alan.getTotalPair());
    alan.updateTable('highCard', alan.getTotalHighCard());
}, 1);

<body>
    <div class="container">
        <div class="row">
            <div class="span12">
                <canvas id="canvas" width="595px" height="160px"></canvas>
            </div>
        </div>
        <div class="row">
            <div class="span12">
                <table class="table table-striped">
                    <thead>
                        <th>Hand</th>
                        <th>Found</th>
                        <th>Sample</th>
                        <th>Percentage</th>
                    </thead>
                    <tr>
                        <td>Royal Flush
                            <div class="bar percentBar royalFlush">
                        </td>
                        <td id="royalFlush">0</td>
                        <td id="count"></td>
                        <td id="royalFlushPercentage"></td>
                    </tr>
                    <tr>
                        <td>Straight Flush
                            <div class="bar percentBar straightFlush">
                        </td>
                        <td id="straightFlush">0</td>
                        <td id="count"></td>
                        <td id="straightFlushPercentage"></td>
                    </tr>
                    <tr>
                        <td>Four of a Kind
                            <div class="bar percentBar fourOfAKind">
                        </td>
                        <td id="fourOfAKind">0</td>
                        <td id="count"></td>
                        <td id="fourOfAKindPercentage"></td>
                    </tr>
                    <tr>
                        <td>Full House
                            <div class="bar percentBar fullHouse">
                        </td>
                        <td id="fullHouse">0</td>
                        <td id="count"></td>
                        <td id="fullHousePercentage"></td>
                    </tr>
                    <tr>
                        <td>Flush
                            <div class="bar percentBar flush">
                        </td>
                        <td id="flush">0</td>
                        <td id="count"></td>
                        <td id="flushPercentage"></td>
                    </tr>
                    <tr>
                        <td>Straight
                            <div class="bar percentBar straight">
                        </td>
                        <td id="straight">0</td>
                        <td id="count"></td>
                        <td id="straightPercentage"></td>
                    </tr>
                    <tr>
                        <td>Three Of A Kind
                            <div class="bar percentBar threeOfAKind">
                        </td>
                        <td id="threeOfAKind">0</td>
                        <td id="count"></td>
                        <td id="threeOfAKindPercentage"></td>
                    </tr>
                    <tr>
                        <td>Two Pair
                            <div class="bar percentBar twoPair">
                        </td>
                        <td id="twoPair">0</td>
                        <td id="count"></td>
                        <td id="twoPairPercentage"></td>
                    </tr>
                    <tr>
                        <td>Pair
                            <div class="bar percentBar pair">
                        </td>
                        <td id="pair">0</td>
                        <td id="count"></td>
                        <td id="pairPercentage"></td>
                    </tr>
                    <tr>
                        <td>High Card
                            <div class="bar percentBar highCard"></div>
                        </td>
                        <td id="highCard">0</td>
                        <td id="count"></td>
                        <td id="highCardPercentage"></td>
                    </tr>
                </table>
                </div>
                </div>
                </div>

.row {
    background:#fff;
}
div {
    text-align:center;
}
.container {
    margin-top:40px;
}
td {
    position:relative;
    z-index:100;
}
div.percentBar {
    width:50%;
    height:100%;
    background-color:orange;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}