If you find my articles useful, please like them and follow them. Also, please visit my personal blog github.com/BokFang

The Canvas element can be used to draw 2D graphics, and we do this by writing JS. First, we write in our HTML file:

<canvas id="canvas" ></canvas>
Copy the code

Then give the canvas a background color in CSS:

#canvas{
  background: #04f7ff;
}
Copy the code

The browser looks like this:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
Copy the code

The reason:

Canvas is made of a drawing board and a drawing paper. The drawing board is like a container on which we draw. When the width and height of the drawing paper are not equal to that of the drawing board, the figure is stretched.

Solutions:

1. Set the Canvas property in the HTML tag:

<canvas id="canvas" width = 300 height = 300></canvas>
Copy the code

2. Set in js:

var canvas = document.getElementById('canvas');
canvas.width=300;
canvas.height=300;
Copy the code

Normal effect