Canvas Summary: element size and drawing surface size

Preface

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

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

Of course, you can also set it in the CSS style without setting it in the canvas, because the canvas itself is also an HTML node.

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

After setting, open the page and find that the canvas size is OK. At this time, we will draw a 40*40 rectangle on it to see the effect.

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

Run page, as shown below

 

The canvas size is 600px, and the height is 300px. There is no problem, as expected. But the rectangle... this is obviously not 40*40. Okay, this is 80*80.

Why is this happening?

Element size and drawing surface size of canvas

The canvas size can be divided into two types: canvas as the size of the HTML element, and canvas as the drawing surface size of the drawing container.

Set the width and height in the canvas element, and specify the element size of the canvas and the size of the drawing surface. The two are equal and the drawing will not have any problems.

However, if you use CSS to set the canvas height and width, you only specify the element size of the canvas without affecting the drawing surface size of the canvas. If the sizes of the two are the same, there will be no problems, but if they are inconsistent, There will be various strange problems. At this time, the browser will have an automatic Scaling Mechanism to scale the drawing surface, to adapt to the size of the canvas element.

In the previous example, the size of the canvas element and the drawing surface is 300*150, but the size of the canvas element is 600*300 in CSS, the actual rectangle is drawn on the drawing surface of 300*150. After the drawing is complete, it needs to be scaled to display it in the canvas element, which leads to a graphical change.

In the previous example, we printed the log:

VaR box = canvas. getboundingclientrect (); // console of the Canvas Element's border box. log (canvas. width + "---" + canvas. height) // 300-150lele.log (box. width + "---" + box. height); // 600-300

The canvas object actually obtains the drawing surface size, while the box obtains the size of the canvas element.

What is the scaling rule?

Let's take a few examples.

1. Set the Canvas Element 600*300 in CSS, the drawing surface 300*100, and the rectangle 40*40.

Actual rectangle 80*120

The width is twice as expected, and the height is three times as expected

2. Set the Canvas Element 600*300 in CSS, the drawing surface 200*150, and the rectangle 40*40.

The actual rectangle is 120*80

The width is 3 times as expected, and the height is 2 times as expected

3. Set the Canvas Element 600*300 in CSS, the drawing surface 1200*900, and the drawing rectangle 60*60.

Actual rectangle 30*20

The width is expected 1/2, and the height is expected 1/3.

4. Set the Canvas Element 600*300 in CSS, the drawing surface 1800*600, and the drawing rectangle 60*60.

Actual rectangle 20*30

The width is expected 1/3, and the height is expected 1/2.

We use element to represent the Canvas Element, canvas to represent the drawing surface, Src to represent the drawn content, and DEST to represent the displayed content. The scaling rule is: DeST. size = SRC. size * (element. size/canvas. size)

Others

In fact, the coordinates are also offset, and the circle is drawn in the canvas. If the size of the canvas element is different from that of the drawing surface, we will find that the center position of the actually displayed circle is not the coordinates you specified. The actual displayed coordinates follow the rules described above.

Of course, it is very easy to solve these problems, that is, do not use CSS to specify the size of the canvas element to maintain the consistency between the canvas element size and the drawing surface size.