javascript canvas ground zero

1// JS Canvas Ground-Zero
2
3/*HTML init:
4<canvas id="my_canvas" width="width" height="height">
5  </canvas>*/
6
7let c = document.getElementById("my_canvas");
8let ctx = c.getContext("2d");
9
10// Color : 
11ctx.fillStyle = "red";
12ctx.strokeStyle = "#ecf0f1";
13
14// Stroke
15let ctx = c.getContext("2d");
16ctx.beginPath();
17ctx.moveTo(50,50);
18ctx.lineTo(200,200);
19ctx.moveTo(200,50);
20ctx.lineTo(50,200);
21ctx.closePath();
22
23// Line style
24ctx.lineJoin = "bevel"; // round - bevel - miter
25ctx.lineCap = "round"; // butt - round - square
26
27// Shapes
28ctx.fillRect(x, y, width, height);
29ctx.arc(x, y, radius, startAngle, Math.PI, flow(true/false));
30ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, destx, desty);
31ctx.quadraticCurveTo(cp1x, cp1y, destx, desty);