This page describes how to create a chess position like this
and add it to an HTML page.
The straightforward way of creating a diagram in HTML is to make an 8 by 8 table of <img> objects, but this leads to a large (and hard to read) HTML file.
Ideally, you would want to specify the chess position with one line of code, containing just the FEN. That idea lead me to create this project.
You can download the full project (846KB) or a minimal version (42KB) containing only the Zürich font.
<html>
<head>
<script src="html-canvas-fen/script.js"></script>
</head>
<body>
<canvas fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR"></canvas>
</body>
</html>
The script.js file loops over the <canvas> elements and processes them if they contain a fen field. If there is no fen field, the <canvas> is left alone.
It then loads all the images for the required font, and when that is done it draws the diagram.
You can specify the full FEN as follows.
<canvas fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"></canvas>
You can leave out the last four fields, as they don't contribute to the image.
<canvas fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w"></canvas>
You can even leave out the side to move (which then defaults to white). In positions with black to move, a dot is shown next to the board.
<canvas fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR"></canvas>
Trailing numbers at the end of a row can be omitted. This is not standard FEN, but I always wondered why these trailing numbers (or trailing slashes) are necessary at all.
<canvas fen="rnbqkbnr/pppppppp/////PPPPPPPP/RNBQKBNR"></canvas>
The following optional fields (shown with their default values) can be set.
| color="#000000" | diagram color | use either the #RRGGBB or #RGB format, or the short color names defined below | ||
| d="40" | square width | integer string up to "96" | ||
| l="2" | border width | integer string, the default is 1/16th of the square width, rounded down | ||
| flip="0" | whether to flip the board | "0" or "1" | ||
| coords="0" | whether to show the coordinates | "0" or "1" | ||
| figurines="0" | whether to show the piece balance | "0" or "1" | ||
| result="" | show result by rotating the kings | "", "1-0", "0-1" or "1/2-1/2" | ||
| mark="" | the markings on the squares | see below | ||
| font="zur" | the pieces font to use | see below |
|
A different size, color and font. |
Some books put no border around the |
White is giving knight and move odds. |
|
Figurines show the material balance. |
Checkmate in the corner. |
White accidentally statemated black. |
These diagrams were made with the following code.
<canvas fen="rnbqk1nr/pp1pppbp/6p/2p/3PP/2N/PPP2PPP/R1BQKBNR" flip="1" d="50" color="#0080FF" font="has"></canvas>
<canvas fen="rnbqk1nr/pp1pppbp/6p/2p/3PP/2N/PPP2PPP/R1BQKBNR" flip="1" l="0"></canvas>
<canvas fen="rnbqkbnr/pppppppp/////PPPPPPPP/R1BQKBNR b" coords="1"></canvas>
<canvas fen="rnbqk1nr/pp1ppp1p/6p/2P/4P/2P/P1P2PPP/R1BQKBNR b" flip="1" figurines="1"></canvas>
<canvas fen="7k/6Q/5K b" result="1-0"></canvas>
<canvas fen="7k//5NK/5B b" result="1/2-1/2"></canvas>
| short | name | hex | ||
|---|---|---|---|---|
| b | black (default) | #000000 | ||
| re | red | #FF0000 | ||
| gr | dark green | #008000 | ||
| bl | blue | #0000FF | ||
| ye | yellow | #FFFF00 | ||
| aq | aqua | #00FFFF | ||
| ma | magenta | #FF00FF | ||
| or | orange | #FF8000 | ||
| sg | spring green | #00FF80 | ||
| pu | purple | #8000FF | ||
| dp | deep pink | #FF0080 | ||
| lg | light green | #80FF00 | ||
| vb | vivid blue | #0080FF | ||
You can use the short name, #RRGGBB or #RGB.
|
The moves of the knight. |
White wins by occupying one of the key |
Black to move draws, because he can get |
|
Four checkmates. |
White wins the black pawn by occupying |
An example with corresponding squares. |
|
The Botwinnik setup of the English opening, |
These diagrams were made with the following code.
<canvas fen="////3N" mark="c2 e2 b3 f3 b5 f5 c6 e6"></canvas>
<canvas fen="1k////3P2K" mark="st c6 d6 e6"></canvas>
<canvas fen="////1P/6k//6K b" mark="li b3/b4-f4 a4/b4-b8 f4/g4-g8"></canvas>
<canvas fen="7k/k1K3Q/5K/R/2BB/6KN/2K3B/k5k" result="1-0" mark="li a4/a5-h5 d1/e1-e8"></canvas>
<canvas fen="///3p/3P" mark="pl c5 b5 a5 a6 a7 e5 f5 g5 g6 g7 do c4 b4 a4 a3 a2 e4 f4 g4 g3 g2"></canvas>
<canvas fen="/4k/2p/2Pp/3P2p/3P1pP/5P/K" mark="'3' a2 '6' b1 '5' b2 '4' b3 '7' c1 '3' c2 '1' c3 '8' d1 '2' d2 '1' d7 '4' d8 '2' e6 '5' e8 '8' f6 '7' f7 '6' f8"></canvas>
<canvas fen="////2P1P/2NPB1P/PP1QNPBP/R4RK" mark="#0000ff cr d4 re ar b2-b4 f2-f4"></canvas>
Every command either sets the color, sets the shape, or it is a square where the object will be drawn.
| do | dot (default) | |
| sq | square | |
| tr | triangle | |
| st | star | |
| cr | cross | |
| ar | arrow | |
| li | (dotted) line |
Arrows are made by joining two squares with a dash (b2-b4).
Lines are made by joining two squares with a slash (b3/b4), and optionally supplying a third square which defines the length of the line (b3/b4-f4).
The default values of several variables can be changed with some Javascript commands, as follows:
<script>
hcf_default_d = "40";
hcf_default_color = "#000000";
hcf_default_flip = "0";
hcf_default_coords = "0";
hcf_default_figurines = "0";
hcf_default_font = "zur";
hcf_default_mark_color = "#000000";
hcf_default_mark_shape = "do";
</script>
For instance, if you are writing about an opening for the black side, instead of including flip="1" in every canvas you can write hcf_default_flip = "1"; once in a script block anywhere on the page.
| "zur" | Zürich (default) |
| ||
| "adv" | Adventurer |
| ||
| "alf" | Alpha |
| ||
| "ber" | Berlin |
| ||
| "cas" | Cases |
| ||
| "chq" | Cheq |
| ||
| "che" | Chess-7 |
| ||
| "con" | Condal |
| ||
| "har" | Harlequin |
| ||
| "has" | Hastings |
| ||
| "kil" | Kilfiger |
| ||
| "lei" | Leipzig |
| ||
| "lin" | Linares |
| ||
| "luc" | Lucena |
| ||
| "mag" | Magnetic |
| ||
| "mar" | Marroquin |
| ||
| "may" | Maya |
| ||
| "med" | Mediaeval |
| ||
| "mot" | Motif |
| ||
| "pir" | Pirat |
| ||
| "1bl" | Blind Training 1 |
| ||
| "2bl" | Blind Training 2 |
| ||
| "3bl" | Blind Training 3 |
|