Phaser home
Log inCreate a game

← Expansion packsGrid

Phaser AE

Card faces

Free packv3.0.0-12D and 3DGrid

Playing-card faces and backs painted on a canvas from vector pips, indices and court figures. A card game gets a clean standard deck at any size, in its own colours, without a single image file.

This is a Free pack. Every phaser.io account can use it in their games.

Released October 19, 2026 · updated October 20, 2026

Card faces: a screenshot of its demo
A note about these graphics

Expansion packs don't come with graphics. This screenshot is one way of drawing what the pack does, made for its demo: none of the sprites, tiles or backgrounds in it are in the pack.

That's by design. A pack is a game's logic, mechanics and effects, and it works with whatever art you give it. Some packs draw effects, backdrops or 3D scenes of their own, but none carries a game's sprites.

So the look is yours. Make the art on phaser.io, bring your own, or let your agent draw it in code: the same pack can look like anything.

The pack

cardArt

function cardArt(): Pack<{ cardArt: CardArtApi }>

The card-art pack: faces and backs painted from vector pips and courts, so a card game needs no image files.

Helpers

cardBackCanvas

function cardBackCanvas(opts: CardArtOptions & { color?: string } = {}): CardCanvas

The BACK of a card — a guilloche lattice inside a double border.

cardFaceCanvas

function cardFaceCanvas(suit: Suit, rank: Rank, opts: CardArtOptions = {}): CardCanvas

The FRONT of a card, drawn once and cached by (suit, rank, size, palette).

Types

CardArtApi

type CardArtApi = typeof kit

game.cardArt — card faces and backs painted on a canvas, as one namespace.

CardArtOptions

interface CardArtOptions

Configures the baked card face art.

  • width?: number — Card width in px (height follows the 1.4 poker ratio). Default 250.
  • paper?: string — Face stock colour.
  • redInk?: string — Ink colour for the red suits.
  • blackInk?: string — Ink colour for the black suits.
  • gold?: string — Court-card metal accent.
  • skin?: string — Court-card face tone.
  • inkOnly?: boolean — INK ONLY: skip the paper fill and the outer edge stroke, leaving a fully transparent background. Pair with a mesh using decal: true — the MESH then supplies the card stock, so the silhouette comes from geometry (crisp rounded corners at any scale) and the background can be any colour or effect instead of baked-in white.
  • inkRim?: number — INK-ONLY RIM: the corner radius of the mesh the art sits on — pass the same number you gave plane({ r }) and the rim lands exactly on the silhouette. Without a rim, a stack of overlapping cards reads as one white blob, since the mesh supplies unbroken stock and nothing marks where one card ends. Default 0.16; 0 omits it. Ignored unless inkOnly; full art already strokes its edge.

CardCanvas

type CardCanvas = HTMLCanvasElement | OffscreenCanvas

What the painters return. The kernel's atlas takes either.