我怎样才能让这个长方形帆布一样锋利的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画布...

肯提到...