How to solve the inconsistency of border style when canvas draws rectangle

In this article Xiaobian for you to introduce in detail the "canvas rectangle painting frame style inconsistency how to solve", detailed content, clear steps, details handled properly, I hope this "canvas rectangle painting frame style inconsistency how to solve" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge bar.

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.

Read here, this "canvas rectangle painting frame style inconsistency how to solve" the article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.