我试图让用户在画布上绘制一个矩形(如选择框).我得到了一些荒谬的结果,但后来我注意到即使只是尝试我的参考here中的代码,我也会得到巨大的模糊线条并且不知道为什么.

它在dylanstestserver.com/drawcss托管.javascript是内联的,所以你可以检查出来.我正在使用jQuery来简化鼠标坐标.

解决方法:

出于某种原因,你的画布被拉伸了.因为您将其css属性宽度设置为100％,所以它会从某种原生大小拉伸它.这是在< canvas>上使用css width属性和width属性之间的区别.标签.您可能想尝试使用一些javascript来填充视口(see jQuery .width())：

jQuery(document).ready(function(){
    var canvas = document.getElementById('drawing');
    canvas.width(($(window).width()).height($(window).height());
    var context = canvas.getContext('2d');
    //...