Canvasfillrect solves the problem that the height of the canvas is doubled when fillRect () is used.

Canvasfillrect solves the problem that the height of the canvas is doubled when fillRect () is used.

When you set the width and height of the canvas, only built-in css is valid. external css is stretched, for example:

<! DOCTYPE html> 
The information is as follows:

This effect is different from what we expected. There are two ways to modify it:
(1)Add the code setting width and height attribute in code js to set the width and height:
canvas.setAttribute("height",canvas.clientHeight);canvas.setAttribute("width",canvas.clientWidth);
(2)In addition to the Code for setting the width and height attributes in external css, add the width and height attributes to the canvas label directly:
<Canvas id = "canvas" width = "300" height = "400"> <span> canvas labels are not supported </span> </canvas>
The final result is as follows:

The above article solves the problem of double effect in height when using fillRect () on the canvas. This is all the content that I have shared with you. I hope you can give us a reference and support for the help house.