我怎樣才能讓這個長方形帆布一樣鋒利的CSS DIV

Question

我的筆：http://codepen.io/anon/pen/mBliE

用相同的橙色背景和相同的黑色邊框，橙色CSS DIV看起來鋒利和清潔。

在畫布上繪製的橙色矩形看起來模糊/扭曲。

爲什麼會有差異？我沒有設定一個CSS樣式這是一個

初學者失敗我聽到;-)畫布高度/寬度

我怎樣才能讓我的畫布銳看起來像CSS？

<canvas id="mycanvas" height="200" width="400"></canvas> 
<div></div> 

div{ 
    border:black 2px solid; 
    height:198px; 
    width:50px; 
    background:orange; 
    display:inline-block; 
} 

canvas { 
    background: red; 
} 

$(document).ready(function() { 

    var canvas = document.getElementById("mycanvas"); 
    var context = canvas.getContext("2d"); 
    context.save(); 
    context.lineWidth = 1; 

    context.fillStyle = "orange"; 
    context.fillRect(348, 1, 50, 198); 

    context.strokeStyle = "black"; 
    context.strokeRect(348, 1, 50, 198); 

    context.fill();  
    context.restore(); 

}); 

Answer 1

你可以只玩一點點與你線寬：

$(document).ready(function() { 

    var canvas = document.getElementById("mycanvas"); 
    var context = canvas.getContext("2d"); 
    context.save(); 
    context.lineWidth = 2; 

    context.fillStyle = "orange"; 
    context.fillRect(350, 1, 50, 198); 


    context.strokeStyle = "black"; 
    context.strokeRect(349, 1, 50, 198); 

    context.fill();  
    context.restore(); 

}); 

CodePen

Answer 2

它看起來像行程集中在畫布邊緣，而不是位於內部或外部，並且寬度最小設置爲兩個像素。通過將筆畫設置爲兩個 - context.lineWidth = 2; - 線條變得更銳利。也許你可以以某種方式移動行程之外或insede畫布...

肯提到...