Rectangle In A Canvas Has Soft Edges

Question

I have a yellow canvas inside of 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 defined edges, while the two sides of the rectangle that are inside of 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 does this happen? And how can I make all four sides of the rectangle very exact and defined? Thank you.

Answer 1

You should set canvas size like this:

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

here's the demo

or from javascript:

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

setting size from CSS just scales the canvas which is not what you want!