javascript - 我还是 jsfiddle 错误？

Question

简单的 Canvas 绘图，好像在 jsFiddle 坐标上没有被正确识别:
JS:

var w = $(".trace").width();
var h = $(".trace").height();

var bgCanvas = $("<canvas></canvas>").addClass("canvas");
bgCanvas.width(w).height(h);
var bgContext = bgCanvas[0].getContext("2d");

$(".trace").append(bgCanvas);

bgContext.strokeStyle = "#000";
bgContext.moveTo(0,0);
//this line should go to the middle of the canvas
//instead it goes much further both horizontally and vertically
bgContext.lineTo(200,100);
bgContext.stroke();

HTML:

<div class="trace"></div>

CSS:

.trace{
    width: 400px;
    height: 200px;
    background: yellow;
}
.canvas{
    border: 1px #000 dotted;
}

jsFiddle

检查了最新的 IE 和 Chrome。
他们(jsFiddle 开发人员)建议在 github 上提交问题之前与其他人分享和检查，所以...是我在某处的错误，还是 jsFiddle？

Answer 1

改变这一行:

bgCanvas.width(w).height(h);

对此它会起作用:

bgCanvas.attr({width: w, height:h});

通过使用 .width 和 .height，您只需修改 Canvas 元素 的 CSS 大小，而不是其位图。由于默认大小为 300 x 150，因此会拉伸(stretch)到您使用 CSS 设置的任何大小。

Modified fiddle