How can I make this canvas rectangle as sharp as a css div

Question

My pen: http://codepen.io/anon/pen/mBliE

The orange css div with the same orange background and the same black border looks sharp and clean.

The orange rectangle drawn in a canvas looks blurry/distorted.

Why is there a difference? I do not set the canvas height/width with a css style which is a

beginner failure I have heard ;-)

How can I make my canvas sharp looking like 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();

});

I moved the rectangles around a bit and they look the same to me. codepen.io/anon/pen/lDEqu — rfoo

Alex Art. Alex Art. · Accepted Answer · 2013-09-25T08:45:14

You could just play a little bit with you line width:

$(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

How can I make this canvas rectangle as sharp as a css div

2 Answers