I created a card game in Silverlight a year ago, in order to learn a bit about Silverlight. I am now wanting to make a HTML5 version of the game in an effort to learn a little bit more about that. I am thinking I'd like to take advantage of stuff like Knockout.js and WebSockets and the canvas element.

Now what I'm confused about is how to lay out the cards on the screen. With Silverlight I was able to make a "Hand" control, which was made up of two sub controls: the cards the player has in their hand and the ones they have on the table. They were made up of Card controls.

I don't believe there is the concept on a User Control in JavaScript; so I am possibly thinking about this in entirely the wrong way.

I have a client side JSON object called game, which contains an array of players; each player has a hand which is made up of an array of in-hand cards and on-table cards. Ideally I would like to bind these to something using Knockout.js, but I don't know what I could bind to.

How could I lay out some cards on the table, and perhaps make reuse of something for each player? Would I simply position images (of cards) on a canvas? Is there a way to make some kind of hand object that each player could have and that I could bind to?

  • 3
    This really looks like a SO question to me...
    – Jose Faeti
    Commented Sep 3, 2011 at 10:59
  • @Jose - It's asking for algorithms and code structures and there's no code that's failing, so by those criteria it's on topic here.
    – ChrisF
    Commented Sep 3, 2011 at 17:14
  • GameDev question ? Commented Sep 4, 2011 at 11:56

1 Answer 1


You don't need knockout with the canvas. Just do your design like you normally would.

Personally I create objects with Draw methods, these are Drawable.

Live Example.

Then you have other container object that have references to Drawable objects.

Example of a Drawable Card.

(Uses pd)

var Card = {
    draw: function _draw() {
        ctx.strokeRect(this.x, this.y, 30, 50);
        ctx.strokeText(this._value, this.x+10, this.y+25);
    setPosition: function _position(x, y) {
        this.x = x;
        this.y = y;   

And a Container Hand that has references to drawable cards.

var Hand = {
    draw: function _draw() {
        this.cards.forEach(function (c, i) {
    generateCards: function _generateCards(n) {
        for (var i = 0; i < n; i++) {
            this.cards.push(Object.create(Card, pd({ _value: i })));
    setPosition: function _setPosition(x, y) {
        this.x = x;
        this.y = y;
        this.cards.forEach(function _each(c, i) {
            c.setPosition(x + i*40, y);

And some bootstrap code to draw something.

var h = Object.create(Hand, pd({ cards: [] }));


h.setPosition(10, 10);

  • this is a great answer - thanks for putting in so much effort
    – Roonooir
    Commented Sep 4, 2011 at 8:41
  • what is happening with the second paramter of object.Create? I have been reading that it is to initialise the object. but don't understand what the "pd" is doing. most of the other examples I have seen just pass an object literal - thanks
    – Roonooir
    Commented Sep 4, 2011 at 10:09
  • aha - just seen your library on GitHub - makes sense now. thanks again
    – Roonooir
    Commented Sep 4, 2011 at 10:14
  • @Roonooir I forgot to put a link/reference to pd! I've added one.
    – Raynos
    Commented Sep 4, 2011 at 11:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.