HTML5 Canvas border Style inconsistencies when drawing rectangles

These two days need to use a colleague HTML5 drawing, found inside the function of the rectangle painted rectangular style inconsistent problem, finally I through some exclusion law found the crux of the problem, now share to everyone.

First enclose the code of the HTML5 rectangle:

Copy Code code as follows:
<canvas id= "MyCanvas" width= "578" height= "></canvas>"
<script>
var canvas = document.getElementById (' MyCanvas ');
var context = Canvas.getcontext (' 2d ');

Context.beginpath ();

Context.rect (188.0, 50, 200, 100.375);
Context.fillstyle = ' white ';
Context.fill ();
Context.linewidth = 1;
Context.strokestyle = ' red ';
Context.stroke ();
</script>

You will find that the following border style is not the same, obviously the bottom is very thin. and the colors are slightly different.

After modifying Context.rect (188.0, 50, 200, 100.375) to Context.rect (188.0, 50, 200, 100), the pattern was found to be identical.
This explains: When drawing a rectangle, if the parameters inside are not integers, it is easy to cause a border problem, so we recommend that you take the whole after the use.