The rectangle on the canvas has soft edges

Question

I have a yellow canvas, inside which I draw a red rectangle. But I noticed an interesting effect - the two sides of the rectangle that are on the border have very specific edges, and the two sides of the rectangle that are inside the yellow canvas are “softened” or “blurred”.

This is what I have now:

My HTML:

<canvas id="myCanvas"> 
</canvas>

JavaScript:

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

CSS

#myCanvas {
    background-color:#FFFF00;
    width:1000px;
    height:600px;
    border: none;
    margin-left:auto;
    margin-right:auto;
}

JSFIDDLE

Why is this happening? And how can I make all four sides of a rectangle very precise and defined? Thank.

Answer 1

You should set the canvas size as follows:

<canvas id="myCanvas" width="1000" height="600"></canvas>

here demo

javascript:

var canvas = document.getElementById("myCanvas");
canvas.width  = 1000;
canvas.height =  600;

CSS , , !

Answer 2

CSS , , . HTML aneelkkhatri, Javascript, . jsfiddle.

http://jsfiddle.net/S6vmh/5/

var canvas=document.getElementById("myCanvas");
canvas.width  = 1000;
canvas.height = 600;

var ctx=canvas.getContext("2d");
ctx.wdith=1000;
ctx.fillStyle="#FF0000";
ctx.fillRect(1,1,150,75);

Answer 3

, . : 300x150 ( mdn)

.

<canvas id="myCanvas" width="400" height="200"></canvas>

CSS

#myCanvas {
  background-color:#FFFF00;
  border: none;
  margin-left:auto;
  margin-right:auto;
}

http://jsfiddle.net/T3yU2/

Answer 4

, CSS, . RGBA fillStyle .