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.