This is the 10th day of my participation in the First Challenge 2022, for more details: First Challenge 2022

Hi, I’m the watermelon guy.

Today we continue the second part of our introductory Cavans tutorial.

This is the Canvas Primer series:

Previous: Canvas simple introduction to small tutorial

Clears the specified rectangle area of the canvas

ctx.clearRect(x, y, width, height);
Copy the code

Clears the range of the upper-left rectangle coordinates (x, y), width and height.

Clear the entire canvas as follows:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.clearRect(0.0, canvas.width, canvas.height);
Copy the code

In addition, if you reset the width or height of the Canvas element, the canvas will be completely emptied.

canvas.height = canvas.height;
Copy the code

Rendering text

ctx.fillStyle = '#5391F5'; / / blue
ctx.font = '48px serif';
ctx.textBaseline = 'top';

ctx.fillText('Hello Canvas! '.10.10); // Fill in the text

ctx.lineWidth = 2;
ctx.strokeText('Hello Canvas! '.10.10); // Stroke text
Copy the code

Let’s set the font style first.

Ctx. font specifies the font style. The default value is 10px sans-serif.

The value of ctx.font is the same as the font property of the CSS. Font is a shorthand property, that is, a combination of properties. Font-size and font-family attributes must be included in the command, otherwise they will be invalid.

I’ve always felt that the shorthand attribute is a bad culture because it usually has too many attributes and can be combined in multiple ways, which is hard to remember.

Canvas does not provide the fontSize property. You can only set the text size using the font property. You also need to set the font-family property.

Ctx. textBaseline is used to set the textBaseline. The default value is alphabetic.

And since we’re used to setting coordinates in the upper left corner, we can think about setting coordinates in the upper left cornertextBaselineSet totop.

The ctx.filltext () method passes in (1) the text content, (2) the coordinates of the starting point of the text, and (3) an optional maximum width beyond which the text is squished to fit the width.

Ctx.stroketext () is used in the same way as ctx.filltext.

The drawing looks like this:

Draw pictures

const img = new Image();
img.src = './watermelon.jpg';

img.onload = function() {
  ctx.drawImage(img, 300.0); // Draw the image to the (300, 0) position of the canvas.
}
Copy the code

We draw the image using the ctx.drawImage() method.

There are many ways to pass parameters in this method. You can use only part of the image and then zoom in and out.

But this article is a primer, so the above code just draws the original image onto the canvas without any extra processing.

The result of drawing is as follows:

File and file back

Because each time we draw a new graph, we may have to temporarily modify some global properties, such as fillStyle, font and so on, and then restore the graph after drawing it.

If we had to remember which properties were changed every time and then explicitly change back to the original, it would be too costly and leaky.

So Canvas provides a couple of ways to solve this problem.

ctx.fillStyle = '#5391f5'; // now #5391f5 is blue

ctx.save(); / / archive
ctx.fillStyle = '#FFDF5C'; / / yellow
ctx.fillRect(20.80.20.20);
ctx.restore(); // back, fillStyle changes back to blue

ctx.fillRect(50.80.20.20);
Copy the code

Ctx.save () saves all of the current drawing state, and then executing ctx.restore() reads this state back and deletes the previous archive.

The bottom layer is a stack. You can consecutively save, which pushes multiple drawing states onto the stack, and restore takes the topmost drawing states off the stack and applies them to the canvas.

The drawing result of the picture is:

At the end

This article explains how to clear a certain area, draw text, draw pictures, archive and file back, and recommends you try it yourself.

See you in the next article.