Text Is Vertically Stretched On My Canvas, Making It Unreadable

I have a canvas that I am drawing on top of a OpenLayers map. The canvas is colored in gradient colors and now I am trying to add text on top of it. However the text seems to be st

Solution 1:

The main problem here is the CSS adjustment of the width and height of the canvas element.

If it helps to understand the problem, think of <canvas> the same way you would think of <img/>, if you take an img, and give it a width and height of 50 x 500, it would stretch too.

The fix is to ensure that you set the width an height of the canvas element itself, before it processes it's content, like this:

<canvas id="speedList" width="20" height="500"></canvas>

You then also need to make sure your remove the width and height properties inside your CSS, like this:

#map {
    position: relative;
    height: 500px;
}

#speedList {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    z-index: 1000;
    margin: 0;
    padding: 0;
}