According to this explanation on stackoverflow, it appears that if you set the width and height of your canvas element in css
canvas {
height: 20px;
width: 20px;
}
whenever you render vectors on the canvas they will appear stretched as css only sets the container size not the canvas size. So you have to do something like this:
var canvas = document.getElementById("canvas");
canvas.setAttribute("width", "20);
canvas.setAttribute("height", "20);
How. Strange.