Computer-Graphics/rectangles.html at to_be_pushed · ruchi09/Computer-Graphics · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!-- ******************************************************************************************************************
This program illustrates some basic constructions with shapes and colors
Program Written By
  Name : Ruchi Saha
  Roll No: CED15I023
****************************************************************************************************************** -->

<!doctype html>
<html>
  <head>
    <script>

      function componentToHex(c)
      {
        var hex = c.toString(16);
        return hex.length == 1 ? "0" + hex : hex;
      }


      function cocentric_rectangles(ctx)
      {
        x = 80
        y = 80
        width =300
        height = 150
        // cocentric rectangles

        // ctx.font="20px Georgia";
        // ctx.fillStyle = "black";
        // ctx.fillText("Opaque Rectangles", 130,30)

        ctx.fillStyle = "green";
        ctx.fillRect(x,y,width,height);

        ctx.fillStyle = "blue";
        ctx.fillRect(x+20,y+20,width-40,height-40);

        ctx.fillStyle = "purple";
        ctx.fillRect(x+40,y+40,width-80,height-80);
        return;
      }

      function circles(ctx)
      {
        console.log("hi");
        ctx.globalAlpha = 1;
        r = 255;
        var x = [200,140,150,70,200,240,270,300,370];
        var y = [475,550,470,510,530,570,520,460,500];
        var radius = [20,25,14,23,15,10,30,17,35];
        var gb =[120,70,100,30,140,170,190,210,222];


        for(i=0;i<x.length;i++)
        {
          // Basicall, to generate the shades of red, we ste red to 255 and vary green and blue equally i.e.
          // vary green and blue such that green is always equal to blue
          g = b = gb[i];
          ctx.beginPath();
          ctx.arc(x[i],y[i],radius[i],0,2*Math.PI);
          ctx.fillStyle = "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
          ctx.fill();
        }

        return;
      }

      function smiley(ctx)
      {
        ctx.beginPath();
        ctx.lineWidth = 5
        ctx.arc(1000,500,100,0,2*Math.PI);
        ctx.fillStyle = "yellow"
        ctx.fill();
        ctx.strokeStyle = "black"
        ctx.stroke()

        ctx.beginPath();
        ctx.arc(1000,500,60,1*Math.PI/4,3*Math.PI/4);
        // ctx.strokeStyle = "black"
        ctx.stroke()
        ctx.beginPath();
        ctx.ellipse(960, 470, 10, 20,Math.PI/180 , 0, 2 * Math.PI);
        ctx.ellipse(1040, 470, 10, 20,Math.PI/180 , 0, 2 * Math.PI);
        ctx.fillStyle = "black"
        ctx.fill();


      }


    </script>

  </head>

  <body>

    <canvas width = "1200" height = "700" id = "Rectangles"></canvas>
      <script>
        var c = document.getElementById("Rectangles");
        var ctx = c.getContext("2d");


        cocentric_rectangles(ctx);

        //  Translucent rectangles
        ctx.fillStyle = "red";
        ctx.globalAlpha = 0.6
        ctx.fillRect(900,80,180,100);

        ctx.fillStyle = "blue";
        ctx.fillRect(1000,120,180,100);

        ctx.fillStyle = "yellow";
        ctx.fillRect(950,150,120,100);


        // circles

        circles(ctx);

        smiley(ctx)


        //
    </script>
  </body>

</html>