Canvas element size and drawing surface size

Original link: Canvas Summary: Element size and drawing surface size preface

When we use canvas, we usually set its width and height directly in the canvas element:

1	<canvas id="myCanvas"width="300"height="150">browser don‘t support canvas</canvas>

Of course, it can also be set directly in the CSS style without being set in the canvas, because the canvas itself is also an HTML node

1	canvas{width:600px;height:300px}

After setting up, open the page, find canvas canvas display size also OK, this time, we draw a 40*40 rectangle above, look at the effect

12345

varcanvas = document.getElementById(‘canvas‘),    context = canvas.getContext(‘2d‘);   context.fillStyle = ‘cornflowerblue‘;context.fillRect(0, 0, 40, 40);

Run the page and show the following

The canvas size is 600px and the height is 300px, without any problems, as expected. But the rectangle ... This is obviously not 40*40. Okay, this is 80*80.

Why is this happening?

Canvas's element size and drawing surface size

The size of the canvas is divided into two, one is the size of the canvas as the HTML element itself, and the other canvas as the drawing surface size of the drawing container.

Set the width height in the canvas element, specifying the size of the canvas's elements and the dimensions of the drawing surface, both equal and no problem with the drawing

However, if you use CSS to set the canvas width, but only specify the size of the canvas's elements, without affecting the size of the canvas's drawing surface, if the two dimensions are consistent, and there is no problem, but if inconsistent, there will be a variety of strange problems, This time the browser will have an autoscale mechanism to scale the drawing surface to fit the size of the canvas element.

Look at our previous example, the canvas element and the size of the drawing surface is 300*150, but the CSS set the size of the canvas element is 600*300, the actual rectangle is drawn in the 300*150 drawing surface to be drawn, after the completion of the painting to be displayed in the canvas element, Scaling is required, resulting in problems with graphics changes.

In the previous example we print a log:

123	varbox = canvas.getBoundingClientRect(); //canvas元素的边界框console.log(canvas.width + "---" + canvas.height) //300-150console.log(box.width + "---"+ box.height); //600-300

Where the canvas object is actually the size of the drawing surface, Box gets the size of the canvas element

What is the rule of scaling?

Let's take a look at a few examples

1. css Set canvas element 600*300, drawing surface 300*100, Draw rectangle 40*40

Actual Rectangle 80*120

Width is expected twice times, height is expected 3 times times

2. css Set canvas element 600*300, drawing surface 200*150, Draw rectangle 40*40

Actual Rectangle 120*80

Width is expected 3 times times, height is expected twice times

3. css Set canvas element 600*300, drawing surface 1200*900, Draw rectangle 60*60

Actual Rectangle 30*20

Width is expected of 1/2, height is expected of 1/3

4. css Set canvas element 600*300, drawing surface 1800*600, Draw rectangle 60*60

Actual Rectangle 20*30

Width is expected of 1/3, height is expected of 1/2

We use element to represent the canvas element, to represent the surface of the drawing with canvas, SRC to represent the content to be drawn, dest to represent the content, and the scaling rule to be: Dest.size = src.size * (element.size/canvas.size)

Other

In fact, not only the size and scale of the problem, the coordinates will be offset, in the canvas, if the canvas element and the size of the drawing surface is inconsistent, you will find that the actual display of the center position is not the coordinates you specified, the actual display of the coordinates of the same position follows the rules described above.

Of course, it's easy to solve these problems by not using CSS to specify the size of the canvas element, keeping the size of the canvas elements consistent with the surface dimensions of the drawing

Self-adapting

When we say adaptive, we are talking about CSS layout dimensions Adaptive, that is, the display size of the element.

The Width/height property of the canvas corresponds to the coordinate space within the canvas and does not belong to the CSS tube.

As a result, the display size of the canvas can be specified by CSS rules, so that the display is adaptive, but its internal pixels do not correspond to CSS pixels or screen physical pixels, that is, zoom display.

===========================================

If you need to let the canvas coordinate space always follow the window size, you can use JS to set the canvas aspect for the window high width x device pixel density, and listen to the window resize event, so that the canvas aspect with the change in the size of the Windows change Of.

In addition, when the canvas's aspect changes, the canvas content is emptied and needs to be redrawn.

Canvas element size and drawing surface size