Comment: There are two forms, one is stroke (fill) and the other is fill (stroke). The specific implementation code is as follows. Interested friends can refer to it. I hope it will be helpful to everyone.
First, place a canvas element in the html page, where the canvas element should have three attribute IDs, width, and height.<canvas></canvas>
Get the canvas object and get the context var cxt=document.getElementById('demo').getContext(2d); where parameter 2d is deterministic.
When you start drawing, there are two forms, one is stroke and the other is stroke.
javascript code:
<script language="javascript">
var cxt=document.getElementById('demo').getContext("2d");
cxt.beginPath();
cxt.fillStyle="#F00";/*Set fill color*/
cxt.fillRect(0,0,200,100);/* Draw a rectangle, the first two parameters determine the starting position, the last two are the width and height of the rectangle respectively*/
cxt.beginPath();
cxt.strokeStyle="#000";/*Set border*/
cxt.lineWidth=3;/*Border width*/
cxt.strokeRect(0,120,200,100);
cxt.beginPath();
cxt.moveTo(0,350);
cxt.lineTo(100,250);
cxt.lineTo(200,300);
cxt.closePath();/*Optional step, close the drawn path*/
cxt.stroke();
</script>
Reproduction image: