Solution to inconsistent border styles when HTML5 canvas draws a rectangle

Comments: HTML5 painting finds that the border drawn by the function that draws a rectangle has a style inconsistency problem. Let's share our ideas on solving the problem with you. Do not miss out if you are interested.

In the past two days, I used my colleague HTML5 to draw pictures and found that the border drawn by the function that draws a rectangle in the image had a style inconsistency problem. Finally, I found the crux of the problem through some exclusion methods, I will share it with you.

First, the code for drawing a rectangle in HTML5 is attached:

The Code is as follows:
<Canvas id = "myCanvas" width = "578" height = "200"> </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 the border style is different after the execution, obviously the bottom is very fine. The color is also slightly different.

After you change context. rect (188.0, 50,200,100.375) to context. rect (188.0, 50,200,100), the style is completely consistent.
This shows that when you draw a rectangle, if the parameters in the rectangle are not integers, it will easily lead to border problems. Therefore, we suggest you use them after rounding.