Javascript 画布上的自由绘图变得模糊

当我在织物上使用自由绘图时，有时绘图会变得模糊！ 这是一幅演示问题的图片：

这是完整的代码：

var Operations = {
    freeDrawing:0,
    selection:1,
    move:2,
    erease:3
};
var Options = {
    EraseBrush:"#ffffff",
    DrawingBrushColor:'#005E7A',
    DrawingBrushWidth:'16',
    PrushPattern:'pencil',
    EraserWidth:'24'
};
var BrushePatterns = {
    Pencil:'pencil',
    Circle:'circle',
    Spray:'spray',
    Pattern:'pattern',
    HLine:'hline',
    VLine:'vline',
    Square:'square',
    Diamond:'diamond',
    Texture:'texture'
};
var app = (function(){
    var application={};
    var canvas = window.__canvas = new fabric.Canvas('board',{defaultCursor :'crosshair',isDrawingMode:true,selection:true});
    fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding:5});
    canvas.freeDrawingBrush = new fabric['PencilBrush'](canvas);
    if (canvas.freeDrawingBrush) {
        canvas.freeDrawingBrush.color = Options.DrawingBrushColor;
        canvas.freeDrawingBrush.width = Options.DrawingBrushWidth;
        canvas.freeDrawingBrush.shadow = new fabric.Shadow({
          blur: 0,
          offsetX: 0,
          offsetY: 0,
          affectStroke: true,
          color: Options.DrawingBrushColor,
        });
    }
    canvas.on('mouse:down',function(e){
    });
    canvas.on('mouse:up',function(e){

    });
    canvas.on('mouse:move',function(e){

    });
    /*  function resizeCanvas() {
        setTimeout(()=>{
            var canvasContainer=document.getElementById('ccontainer');
            canvas.setHeight(canvasContainer.clientHeight);
            canvas.setWidth(canvasContainer.clientWidth);
            canvas.renderAll();
        },500);
    }*/
    application.activateDrawingMode=function(){
        toggleOperation(Operations.freeDrawing);
    }
    application.activateEraseMode = function(){
        toggleOperation(Operations.erease);
    }
    application.activateMousePointerMode = function(){
        toggleOperation(Operations.selection);
    }
    function toggleOperation(operation){
        if(operation === Operations.freeDrawing){
            /*canvas.isDrawingMode=true;
            canvas.selection = false;
            canvas.freeDrawingBrush.color = Options.DrawingBrushColor;
            canvas.freeDrawingBrush.width = Options.DrawingBrushWidth;*/
        }
        else if(operation === Operations.erease){
            canvas.selection = false;
            canvas.freeDrawingBrush.color = Options.EraseBrush;
            canvas.freeDrawingBrush.width = Options.EraserWidth;
        }
        else if(operation === Operations.selection){
            canvas.isDrawingMode = false;
            canvas.selection = true;
        }
    }
    //resize on init
    //resizeCanvas();
    application.canvas=canvas;
    return application;
})();
function freeDrawingButtonclicked(){
    app.activateDrawingMode();
}
function pointerButtonClicked(){
    app.activateMousePointerMode();
}
function eraserButtonClicked(){
    app.activateEraseMode();
}

---

我使用fabric的1.7.19版本，我有一个主页，其中包括fabric js文件和上面提到的文件。ASP.Net核心web应用程序正在使用这些文件。我看不出这个代码和那个代码之间有什么区别，但我的代码产生了这些模糊，我不知道为什么

整晚拉我的头发之后，如果你将

canvas.freeDrawingBrush.width

的值作为字符串传递，在引号

'14'

之间，你会得到这个模糊度，但是如果你将这个值作为整数传递，你就不会得到这个模糊度。我认为这是一个bug，我将在

Fabric.JS

GitHub存储库中创建一个问题。不管怎样，我只是想让你知道问题出在哪里，所以我帮别人留了头发。
干杯

我在react中工作时，并没有通过传递数字来解决问题，而是将数据从一个组件传递到另一个组件，最后将数字解析为整数，这样就解决了问题：

canvas.freedrawingprush.width=parseInt（props.width，10）

---

但是感谢@Mahmoud，因为它指明了方向

是的，主要原因是没有将

整数

值传递给该属性！伙计，他们应该在文档中提到这一点！！！与您的问题没有直接关系，但我得到了那些模糊的线条，这是因为我使用css在cavas上设置了一个

边框！我去掉了边界，由于某种原因，模糊消失了。。。希望它能帮助别人。