Canvas- stroke and fill

Stroke

stroke

Canvas commonly used strokemethod is to stroke method, which for outlining.

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.lineTo(0, 100);
ctx.stroke();

strokeStyle

As the name suggests, strokeStylethat is used to describe the style of stroke, simply put, is the edge color.

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.lineTo(0, 100);
ctx.strokeStyle = 'blue';   //设置边的颜色为蓝色
ctx.stroke();

strokeRect

The rectangle drawing method is by way of stroke.

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.strokeRect(100, 100, 150, 100);

filling

fill

Filling, with a color that is a closed inner space filled.

E.g,

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.fillStyle = 'green';
ctx.fill();

Can be seen in this example, it does not draw anything, because a straight line can not form a closed area. If coupled with a can,

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.lineTo(0, 100);
ctx.fillStyle = 'green';
ctx.fill();

fillThe method of automatically forming and filling a closed area.

fillRect

There are strokeRect, naturally there fillRect, parameters are also the same.

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.fillRect(100, 100, 150, 150);

fillStyle

Likewise, fillStylealso the fill style to modify, i.e., fill color.

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.fillStyle = 'orange';
ctx.fillRect(100, 100, 150, 150);