What is the solution to the inconsistent border style when HTML5 canvas draws a rectangle?

What is the solution to the inconsistent border style when drawing rectangles in HTML5 canvas? I believe many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problems. Through this article, I hope you can solve this problem.

These two days need to use my colleague HTML5 drawing things, found that the rectangle drawing function drawn by the frame is inconsistent, and finally I through some elimination to find the crux of the problem, now share with you.

First attach the code for HTML5 to draw a rectangle:

The code is as follows:

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

You will find that the style of the rear border is different, and the bottom is obviously very thin. The color is also slightly different.

After changing context.rect (188.0, 50,200,100) to context.rect (188.0, 50,200,100), we find that the style is exactly the same.

This shows that when drawing a rectangle, if the parameters inside are not integers, it is easy to lead to border problems, so it is recommended that you take the whole and then use it.

After reading the above, have you mastered the solution to the inconsistent border style when drawing rectangles in HTML5 canvas? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!