Things I want to do
The canvas tag can be sized in two ways, and while they look the same, their behavior differs when handled with JavaScript, so let’s examine this.
Environment
Chrome： 113.0.5672.127
How to set the size of a canvas
The size of the canvas can be set using attributes and styles.
The results are similar, as shown below.
Settings in the attribute (within the canvas tag)
<canvas width=200 height=200></canvas>The HTML above will allow you to draw a 200×200 canvas as shown below.
(The background has been changed to gray to make the area easier to see.)
Style settings
<canvas style="width:200px; height:200px;"></canvas>The HTML above will allow you to draw a 200×200 canvas as shown below.
(The background has been changed to gray to make the area easier to see.)
Operated with JavaScript
Coordinate system
test
Let’s try running the following script on a canvas whose size has been set using attributes and styles.
Draw a blue line from (0,0) to (100,100).
The canvas size is 200×200, so a blue line should be drawn from the top left to the center.
/*canvas からContext(let ctx)を取得 */
ctx.beginPath() ;
ctx.moveTo( 0, 0 ) ;
ctx.lineTo( 100, 100 )
ctx.strokeStyle = "blue" ;
ctx.lineWidth = 5 ;
ctx.stroke() ;attribute
style
Result
As shown above, setting it in the attribute will result in the expected behavior.
However, when specified using `style`, it doesn’t behave as expected.
Meaning of Width/Height
This section explains why there was a difference in the two different ways of setting Width/Height.
To put it simply, the Width/Height values set for attributes and Styles are different.
The meanings of attribute and Style’s Width/Height are as follows:
attribute : Width/height in coordinate space
Style : Display width/height
In other words, setting the Width/Height in the style does not change the coordinates within the Canvas.
If you don’t specify Width/Height in the attribute, the coordinate space will be 300×150.
In other words, the following example transforms a 300×150 canvas to 200×200 for display.
<canvas style="width:200px; height:200px;"></canvas>Therefore, the result was not what we had anticipated.
結論
To set the size of the coordinates within the canvas, specify it using an attribute.
However, this does not mean that you don’t need to configure it in Style.
For example, if you change the size using an attribute, you will need to modify the rendering process in JavaScript.
However, with Style, you can enlarge or reduce the size simply by changing the size setting.
It’s also possible to implement a system where you specify the canvas coordinate size using an attribute, and then change the display size using a Style to match the window size.
Websites I used as references
コメント