& Lt; canvas & gt; problems with width and height, and problems with canvas settings

<Canvas> canvas settings encounter problems when setting width and height.

When using the <canvas> element, you must set the width and height to specify the size of the area that can be painted. However, there is a small problem when setting the width and height.

Sample Code:

<! DOCTYPE html> 
Here, I directly go to <canvas>The size of the painting area is set in the label.. The effect displayed in the browser is as follows:

Now I am not setting the width and height in the label.
<! DOCTYPE html> <Style type = "text/css"> # drawimg {width: 300px; height: 500px ;}
</Style> 
The effect displayed in the browser is as follows:

As a result, it was originally a rectangle with the same width and height, and the height was obviously lengthened. Why?
In fact, <canvas> has its own default width and height: 300px * 150px, andDefining width and height in <canvas> differs from defining width and height in style.<Canvas> the width and height of the label are the actual width and height of the painting area. The width and height of the style are the rendered height and width of <canvas> in the browser. If the width and height of <canvas> are not specified or the value is incorrect, it is setThe default value is {width: 300px, and height: 150px }.
This explains why the second method causes the image to be stretched and the size of the painting area is not defined in <canvas>. Therefore, the default {width: 300px, height: 150px} is set }, in <style>, {width: 300px; height: 500px;} is used to stretch the height of the painting area.