Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Wrong canvas width calculation

See original GitHub issue

I want to integrate a terminal in a fixed width element and have xterm.js figure out how many columns fit in this space. I think that the calculation of the number of columns (and therefore the canvas width) has a problem, resulting in less columns than there should be, and therefore some wasted space on the right.

First, a screenshot:

xterm

The red portion represents the canvas elements, the black is the viewport element.

What happens is the following:

In fit.js::proposeGeometry, the parent element is 983px wide and term.charMeasure.width is 7.8125px. proposeGeometry therefore returns 125 columns.
In Renderer.ts::onResize the character width is floored, which makes it 7px. The total canvas size is then computed as the number of columns times the character width, which is 7 px * 125 cols = 875 px.
The canvas is drawn 875 px wide, even though the available area is of 983 px.

I suppose the solution would be include using the same character width in both computation.

Details

Browser and browser version: Chromium Version 61.0.3163.100
OS version: Ubuntu 16.04
xterm.js version: v3 (c2b3853aa7aace1353844c844a09c6a4fce8c1cd)

Steps to reproduce

Check out the following branch: https://github.com/simark/xterm.js/tree/repro-canvas-size
Build and run the xterm.js demo

It’s possible for the character width to vary between platforms, and therefore you might see something a bit different than me. For me, the default font gives a character width of ~9.01 px, so you don’t really notice the bug since it doesn’t make a big difference when it gets rounded to 9 px. With a font size of 13 px, the width is 7.8125 px, which makes quite a big difference between when it gets rounded to 7.

Issue Analytics

State:
Created 6 years ago
Reactions:4
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

mofuxcommented, Oct 25, 2017

@simark I think you are right. It would be better if the fit addon would use the term.renderer.dimensions.actualCellWidth and term.renderer.dimensions.actualCellHeight for its calculation, as these seem to be more accurate. I’ll try to create a PR to address this.

0reactions

mofuxcommented, Nov 1, 2017

Short update: I haven’t had any time to implement this yet, but I plan some time next week to implement a PR for this. I’d like to combine it with an implementation for the idea I’ve brought up in #946

Top Results From Across the Web

Incorrect canvas width value - javascript - Stack Overflow

canvas.width is the actual number of pixels that are available inside the canvas, while canvas.style.width is the width of the HTML element ...

Canvas, images and pixels - things I learned building an 8 bit ...

This means that before we do the above, we need to calculate the appropriate size of the canvas. When doing that, we also...

HTMLCanvasElement.width - Web APIs - MDN Web Docs

The HTMLCanvasElement.width property is a positive integer reflecting the width HTML attribute of the element interpreted in CSS pixels.

Configure a WebGL Canvas size - Unity - Manual

To do so, in the index.html file of the WebGL template, set the Unity Instance configuration variable to false: matchWebGLToCanvasSize=false . When this...

HTML canvas measureText() Method - W3Schools

Check the width of the text, before writing it on the canvas: YourbrowserdoesnotsupporttheHTML5canvastag. JavaScript: var c = document.getElementById("myCanvas");