通常 canvas 被拉伸都是因为这个：

canvas的默认大小是300（宽）x150（高）。如果通过 CSS 或者 canvas.style.height 等的样式属性调节 canvas，它不是直接改变画布大小，而是 拉伸画布，之后画的内容会被一并拉伸。

所以把这玩意用 CSS 调成正方形之后画的正方形是个长方形……

正确的解决方案是改变 canvas 对象的 height 和 width 属性，也就是类似于这样：

var cvs = document.getElementById("canvas");
cvs.height = 600;
cvs.width = 600;
javascript

以上。这个问题没见多少人说过，在网上搜索原因的时候，只看到一篇文章写了关于这个的事情。今日再述于此以彰其坑。