Draw standard with canvas flag

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         #flag{
10             width: 600px;
11             height: 400px;
12             background-color: #DE2910;
13         }
14     </style>
15 </head>
16 <body align="center">
17     <canvas id="flag" width=600 height="400"></canvas>
18     <script> 
. 19          var In Flag = document.getElementById ( " In Flag " );
 20 is          var CTX = flag.getContext ( ' 2D ' );
 21 is  
22 is          function drawStar (X, Y, R & lt, deg) { // XY coordinates of the center, R & lt radius, deg rotational angle 
23 is              ctx.beginPath ();
 24              ctx.translate (X, Y);
 25              ctx.rotate (deg * Math.PI / 180 [); 
26 is              var DIT = Math.PI *  . 4  /  . 5 ;
27             var sin = Math.sin(0) * r;
28             var cos = Math.cos(0) * r;
29             ctx.moveTo(cos, sin);
30             for (var i = 0; i < 5; i++) {
31                 var tempDit = dit * i;
32                 sin = Math.sin(tempDit) * r;
33                 cos = Math.cos(tempDit) * r;
34                 ctx.lineTo(cos, sin);
35             }
36             ctx.closePath();
37             ctx.fillStyle = "#ffde00";
38             ctx.fill();
39             ctx.rotate(-deg*Math.PI/180);
40             ctx.translate(-x,-y);
41         }
42 
43         drawStar(100,100,60,-18);
44         drawStar(200,40,20,0);
45         drawStar(240,80,20,27);
46         drawStar(240,140,20,-18);
47         drawStar(200,180,20,0);
48     </script>
49 </body>
50 </html>
Draw standard with canvas flag

Guess you like
