Card faces

What it does

cardFaceCanvas(suit, rank) paints the front of a card: the corner indices, the pips laid out by rank as on a classic deck, and court figures for the Jack, Queen and King. cardBackCanvas paints the back, a lattice pattern inside a double border, in the colour you choose. Each returns a canvas you add to the game's textures, so the deck is generated at load rather than downloaded. A painted card is cached by its suit, rank, size and palette, so asking again for the same card returns the same canvas.

For 3D tables there is an ink-only mode. It paints the markings alone on a transparent background, and the card's own mesh supplies the paper, so the outline comes from geometry and its rounded corners stay sharp however close the camera gets. An optional rim at the mesh's corner radius keeps overlapping cards from reading as one white block.

Features

• A complete deck — every suit and rank, with pips by rank and drawn court figures for the Jack, Queen and King.
• Backs in any colour — a patterned back, deep blue unless you pass a color.
• Any size — set the width; the height follows the 1.4 ratio of a poker card.
• Your palette — paper, redInk, blackInk, and gold and skin for the courts.
• Ink-only mode — inkOnly leaves the card stock to a mesh, with inkRim to mark each card's edge in a stack.
• No assets to load — it paints on an OffscreenCanvas, or a document's canvas where there is none.

Good for

• Patience games that need fifty-two faces and a back on day one.
• Blackjack and poker tables, in 2D or with 3D cards that flip and glide.
• Prototypes and game jams, where shipping or licensing card art would slow you down.
• Themed decks, recoloured to a game's palette through the paper, the inks and the back.

Make it yours

The painters take their options per call. A flat 2D solitaire might paint every face at 180 pixels wide on the default cream paper, with a deep-red back. A 3D table might paint the faces ink-only, with a rim at the same corner radius as its card mesh, so the mesh gives each card its shape and the art only its markings. The inks, the paper and the court tones can all match the game's look.

A quick look

Every face and a back, added to the game's textures:

for (const suit of game.cards.SUITS) for (const rank of game.cards.RANKS)
    game.textures.add(`card-${suit}-${rank}`, game.cardArt.cardFaceCanvas(suit, rank, { width: 180 }));
game.textures.add('card-back', game.cardArt.cardBackCanvas({ width: 180, color: '#1d4f91' }));

Works with

• cards — required: the suits and ranks it paints.
• card-motion — glides, flips and deal styles for the cards it paints.
• solitaire and blackjack — card games that use these faces.

Good to know

• One look: a standard French deck. For illustrated or custom decks, load your own images.
• A card is painted the first time you ask for it; later calls return the same cached canvas, so never draw on it.
• A headless run with neither an OffscreenCanvas nor a document cannot paint; the rules packs still run there.