Sierpinski's Triangle written in Javascript

Code Snippet

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <meta charset="utf-8" />
5.     <meta name="viewport" content="width=device-width" />
6.     <title>Sierpinski Triangle</title>
7.     <link href="/Content/site.css" rel="stylesheet"/>
8.  
9.     <script src="/Scripts/modernizr-2.5.3.js"></script>
10.     
11.     <script src="/Scripts/jquery-1.7.1.js"></script>
12.  
13.     
14. </head>
15. <body>
16.     
17. <h2>Sierpinski Triangle</h2>
18. <canvas id="myCanvas" width="1600px" height="1200px"  style="border:1px solid #d3d3d3;">
19. Your browser does not support the HTML5 canvas tag.
20. </canvas>
21.  
22. <script type="text/javascript">
23.  
24.     function Point(X,Y) {
25.         this.X = X;
26.         this.Y = Y;
27.     };
28.  
29.     function resizeFrame() {
30.         var h = $(window).height();
31.         var w = $(window).width();
32.         $("#myCanvas").css('height', h - 100);
33.         $("#myCanvas").css('width', w - 50);
34.     }
35.  
36.     function canvas() {
37.         this.height = $(window).height();
38.         this.width = $(window).width();
39.     }
40.  
41.     $(document).ready(function () {
42.         jQuery.event.add(window, "load", resizeFrame);
43.         jQuery.event.add(window, "resize", resizeFrame);
44.  
45.         var color = "red";
46.         var backgroundColor = "white";
47.         var lineWidth = 1;
48.         var precision = 1; //30,10,8
49.         //var canvasDim = new canvas();
50.  
51.         var g = document.getElementById("myCanvas");
52.         var ctx = g.getContext("2d");
53.         width = g.width;
54.         height = g.height;
55.         ctx.fillStyle = backgroundColor;
56.         ctx.fillRect(0, 0, width, height);
57.         ctx.strokeStyle = color;
58.         ctx.lineWidth = lineWidth;
59.  
60.         ctx.beginPath();
61.         draw(width, height);
62.         ctx.stroke();
63.  
64.  
65.         function drawLine(pt1, pt2) {
66.             ctx.moveTo(pt1.X, pt1.Y);
67.             ctx.lineTo(pt2.X, pt2.Y);
68.             //requestAnimationFrame(render);
69.         }
70.  
71.         function draw(width, height) {
72.             //Draw initial outer triangle
73.             var top = new Point(width >> 1, 0);
74.             var bottomLeft = new Point(0, height);
75.             var bottomRight = new Point(width, height);
76.  
77.             drawLine(top, bottomLeft);
78.             drawLine(bottomLeft, bottomRight);
79.             drawLine(bottomRight, top);
80.  
81.             drawSierp(top, bottomLeft, bottomRight);
82.         }
83.  
84.         function drawSierp(a, b, c) {
85.             if ((a.X - b.X) > precision) {
86.                 drawLine(a, b);
87.                 drawLine(b, c);
88.                 drawLine(c, a);
89.                 drawLine(a, new Point((a.X + b.X) >> 1, (a.Y + b.Y) >> 1));
90.                 drawLine(b, new Point((a.X + b.X) >> 1, (a.Y + b.Y) >> 1));
91.                 drawLine(c, new Point((b.X + c.X) >> 1, (b.Y + c.Y) >> 1));
92.                 drawLine(a, new Point((c.X + a.X) >> 1, (c.Y + a.Y) >> 1));
93.                 drawLine(b, new Point((b.X + c.X) >> 1, (b.Y + c.Y) >> 1));
94.                 drawLine(c, new Point((c.X + a.X) >> 1, (c.Y + a.Y) >> 1));
95.  
96.                 drawSierp(a, new Point((a.X + b.X) >> 1, (a.Y + b.Y) >> 1), new Point((c.X + a.X) >> 1, (c.Y + a.Y) >> 1));
97.                 drawSierp(new Point((a.X + b.X) >> 1, (a.Y + b.Y) >> 1), b, new Point((b.X + c.X) >> 1, (b.Y + c.Y) >> 1));
98.                 drawSierp(new Point((c.X + a.X) >> 1, (c.Y + a.Y) >> 1), new Point((b.X + c.X) >> 1, (b.Y + c.Y) >> 1), c);
99.             }
100.         }
101.  
102.     });
103. </script>
104. </body>
105. </html>