logo Canvas Chess


You can modify the way the PGN viewer looks by adding a new line in the configuration:

var viewer = new CHESS.PgnViewer({
    pgn_uri: 'http://www.canvaschess.com/pgn/example1.pgn',
    // New config line goes here

Each line must contain both a property and a value, separated with a colon character (:). Each line must end with a comma character (,) except for the final line.

Setting the Viewer Size

If no width is set, the viewer will default to 600px, which is a comfortable size for most desktop screens. However this might not be appropriate for your website, so you should experiment to find the best fit.

The width must be specified in pixels. This will create a viewer that is 500px in width:

width: '500px'

View Example

By default, the board and the move list will be the same size, approximately 250px each in the example above. You can change the ratio by adding the following setting, which will make the board twice as wide as the move list:

ratio: '2:1'

View Example

The ratio represents board size to move list size. Any ratio is acceptable if it is not less than 1:3 and not greater than 3:1. For instance, you could set the ratio to 5:3 or any other combination where one is not more than 3x larger than the other.

The height is automatically determined based on the width of the board.

Responsive Resizing

The viewer will switch from landscape to portrait layout when it doesn't fit properly on the screen. For example, a mobile device in portrait orientation will trigger the layout to change, pushing the move list below the board.

To turn off responsive resizing, use the following setting. You can test this by resizing your browser window.

responsive: false

View Example

Board and Piece Styles

The default style is Merida pieces on a blue/white board. You can change the board colors using the RGB hexidecimal format that is commonly used on the web:

square_color_dark: '#556b2f',square_color_light: '#ffffe0'

View Example

Canvas Chess comes with a graphical background that you can set:

square_color_dark: '#000',
square_color_light: '#fff',
square_uri_dark: 'canvaschess/img/square_dark.jpg',
square_uri_light: 'canvaschess/img/square_light.jpg'

View Example

It's a good idea to set the square colors when you are using graphics. The colors will be used for the row/column labels. #000 is black and #fff is white. NOTE: You can use long or short format for the color codes (eg. #00ff00 is the same as #0f0).

Different piece sets can be used by providing the URI path to the set:

piece_set: 'canvaschess/img/pieces/spatial/'

View Example

Only the default piece set is included with Canvas Chess. You can download additional sets and board graphics on the downloads page.

Hide Row/Column Labels

Row and column labels are displayed by default, but this can be turned off:

show_labels: false

View Example

Hide Header Tags

The header tags can also be hidden:

show_tags: false

View Example

Turn Off Figurine Notation

Figurine Algebraic Notation (FAN) is best for an international audience. Different countries use different characters to represent the pieces, but the image of the piece is the same everywhere. If you prefer to use Standard Algebraic Notation (SAN), the following setting will turn off the figurines:

figurine: false

View Example

Graphic Commentary Opacity

Graphic commentary refers to arrows and squares in red/yellow/green. If a PGN file created with ChessBase includes graphic commentary, Canvas Chess can read and display it.

The colors have standard meanings and are defined by ChessBase, but you can adjust the opacity/transparency with a number between zero and one (0 = fully transparent, 1 = fully opaque). The default is 0.8:

You can lower the opacity to 0.3 with the following setting:

gc_opacity: '0.3'

View Example - High Opacity
View Example - High Transparency