# rect of Canvas learning record

#### "Jab - check my blog map - there will always be surprises for you"

This paper introduces some basic usage of drawing rectangle path based on rect(), such as rectangle, square, rounded rectangle, linear gradient rectangle, radiation gradient circle

#### rect

• Draw a rectangle. The four input parameters are: starting point x-axis coordinate (starting point is the upper left corner of the rectangle), starting point y-axis coordinate, width and height
• The origin coordinate (0,0) of canvas is the upper left corner
```ctx.rect(x, y, width, height);
```
• Draw a rectangular path
```ctx.rect(10, 10, 100, 50);
ctx.lineWidth =1;
ctx.strokeStyle = '#000';
ctx.stroke();
```

• Draw a square path
```ctx.rect(10, 10, 100, 100);
ctx.lineWidth =1;
ctx.strokeStyle = '#000';
ctx.stroke();
```

• Draw a filled rectangle
```ctx.rect(10, 10, 100, 50);
ctx.fillStyle = '#7FFFAA';
ctx.fill();
```

• clearRect(x, y, width, height);
• Erases everything painted before the canvas with a rectangle, making pixels transparent
• The four input parameters are: the x-axis coordinate of the starting point of the rectangle, the y-axis coordinate of the starting point of the rectangle, the width of the rectangle, and the height of the rectangle.
```ctx.fillStyle = '#7FFFAA';
ctx.fillRect(10, 10, 100, 50);
ctx.clearRect(0,0,60,35);
```

#### fillet

• Draw a rounded rectangle

Canvas origin coordinate (0,0), rectangle upper left corner coordinate (10,10), width 100, height 50, fillet radius 5

```//Rectangle starting coordinate (10,10)
let x =10;
let y = 10;
let r = 5;
//Rectangle width height
let w = 100;
let h = 50;
//Start new path
ctx.beginPath();
//Top left corner fillet
ctx.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);
//Rectangle top edge
ctx.lineTo(x+w-r, y);
//Top right corner fillet
ctx.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);
//Rectangle right line
ctx.lineTo(x+w, y+h-r);
//Lower right corner fillet
ctx.arc(x+w-r,y+h-r,r,0,Math.PI/2);
//Rectangle bottom line
ctx.lineTo(x+r, y+h);
//Lower left corner fillet
ctx.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);
//Rectangle left line
ctx.lineTo(x, y+r);//The last boundary can be drawn with ctx.closePath()
//line width
ctx.lineWidth = 1;
//Line color value
ctx.strokeStyle = '#000';
//Draw line
ctx.stroke();
```

• Draw a filled rectangle

Canvas origin coordinate (0,0), rectangle upper left corner coordinate (10,10), width 100, height 50, fillet radius 5

```//Rectangle starting coordinate (10,10)
let x =10;
let y = 10;
let r = 5;
//Rectangle width height
let w = 100;
let h = 50;
//Start new path
ctx.beginPath();
//Top left corner fillet
ctx.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);
//Rectangle top edge
ctx.lineTo(x+w-r, y);
//Top right corner fillet
ctx.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);
//Rectangle right line
ctx.lineTo(x+w, y+h-r);
//Lower right corner fillet
ctx.arc(x+w-r,y+h-r,r,0,Math.PI/2);
//Rectangle bottom line
ctx.lineTo(x+r, y+h);
//Lower left corner fillet
ctx.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);
//Rectangle left line
ctx.lineTo(x, y+r);//The last boundary can be drawn with ctx.closePath()
//Fill color
ctx.fillStyle = '#7FFFAA';
//Fill
ctx.fill();
```

• Linear gradient, method to create a gradient along the line specified by the parameter coordinates. This method returns a linear canvas gradient object
• The four input parameters are: starting point x-axis coordinate, starting point y-axis coordinate, ending point x-axis coordinate and ending point y-axis coordinate
• x-axis horizontal gradient fill rectangle
```var gradient = ctx.createLinearGradient(0,0,100,0);
ctx.fillRect(10,10,100,50);
```

• y direction vertical direction gradient fill rectangle
```var gradient = ctx.createLinearGradient(0,0,0,50);
ctx.fillRect(10,10,100,50);
```

• Diagonal direction (top left to bottom right) gradient fill rectangle
```var gradient = ctx.createLinearGradient(0,0,100,100);
ctx.fillRect(10,10,100,100);
```

• The six input parameters are: the x-axis coordinate of the start circle, the y-axis coordinate of the start circle, the radius of the start circle, the x-axis coordinate of the end circle, the y-axis coordinate of the end circle, and the radius of the end circle.
```var gradient = ctx.createRadialGradient(50,50,50,50,50,0);