1
+ ( function ( ) {
2
+ // Helper method to draw a shape from an array of points
3
+ window . drawShape = function ( ctx , points , tx , mirror , stroke , fill ) {
4
+ ctx . beginPath ( ) ;
5
+ ctx . moveTo ( tx . x + points [ 0 ] [ 0 ] , tx . y + points [ 0 ] [ 1 ] ) ;
6
+
7
+ // Draw the path
8
+ var numPoints = points . length ;
9
+ var i ;
10
+ for ( i = 1 ; i < numPoints ; ++ i ) {
11
+ ctx . lineTo ( tx . x + points [ i ] [ 0 ] , tx . y + points [ i ] [ 1 ] ) ;
12
+ }
13
+
14
+ // If mirror is true then run through the points again and draw a
15
+ // mirrored version
16
+ if ( mirror == true ) {
17
+ for ( i = numPoints - 1 ; i > - 1 ; -- i ) {
18
+ ctx . lineTo ( tx . x + ( - points [ i ] [ 0 ] ) , tx . y + points [ i ] [ 1 ] ) ;
19
+ }
20
+ }
21
+
22
+ // Apply line styles
23
+ if ( fill == true ) ctx . fill ( ) ;
24
+ if ( stroke == true ) ctx . stroke ( ) ;
25
+ }
26
+
27
+ // Helper function for drawing circles
28
+ window . drawCircle = function ( ctx , x , y , r , stroke , fill ) {
29
+ ctx . beginPath ( ) ;
30
+ ctx . arc ( x , y , r , 0 , 2 * Math . PI ) ;
31
+
32
+ if ( fill == true ) ctx . fill ( ) ;
33
+ if ( stroke !== false ) ctx . stroke ( ) ;
34
+ }
35
+
36
+ window . drawGradientCircle = function ( ctx , x , y , r , color , opacity ) {
37
+ ctx . beginPath ( ) ;
38
+ var gradient = ctx . createRadialGradient ( x , y , 5 , x , y , r ) ;
39
+ gradient . addColorStop ( 0 , 'rgba(' + color + ', ' + opacity + ')' ) ;
40
+ gradient . addColorStop ( 0.5 , 'rgba(' + color + ', ' + opacity + ')' ) ;
41
+ gradient . addColorStop ( 1 , 'rgba(' + color + ', 0)' ) ;
42
+ ctx . fillStyle = gradient ;
43
+
44
+ ctx . arc ( x , y , r , 0 , 2 * Math . PI ) ;
45
+ ctx . fill ( ) ;
46
+ }
47
+
48
+ // Helper function for drawing arcs
49
+ window . drawArc = function ( ctx , x , y , rotation , start , end ) {
50
+ ctx . beginPath ( ) ;
51
+ ctx . arc ( x , y , rotation , start , end ) ;
52
+ ctx . stroke ( ) ;
53
+ }
54
+
55
+ // Helper function to draw a grid in a bounding box
56
+ window . drawGrid = function ( ctx , options ) {
57
+ var bounds = options . bounds ;
58
+ var step = options . step ;
59
+ var offset = options . offset ;
60
+ var verticalSteps = Math . floor ( bounds . bottom / step ) ;
61
+
62
+ ctx . lineWidth = 1 ;
63
+ ctx . strokeStyle = 'rgba(80, 80, 80, 1)' ;
64
+ ctx . beginPath ( ) ;
65
+
66
+ var y ;
67
+ for ( var i = 0 ; i < verticalSteps ; ++ i ) {
68
+ y = i * step + offset ;
69
+ ctx . moveTo ( bounds . left , y ) ;
70
+ ctx . lineTo ( bounds . right , y ) ;
71
+ }
72
+ ctx . stroke ( ) ;
73
+ }
74
+
75
+ // Draw a line of text
76
+ window . drawTextLine = function ( ctx , text , x , y ) {
77
+ ctx . fillStyle = 'rgba(255, 255, 255, 1)' ;
78
+ ctx . fillText ( text , x , y ) ;
79
+ }
80
+
81
+ // Draw a paragraph of text
82
+ window . drawParagraph = function ( ctx , para , x , y , textAlign ) {
83
+ if ( textAlign == undefined ) textAlign = 'left' ;
84
+ var headingX = x ;
85
+ switch ( textAlign ) {
86
+ case 'left' :
87
+ x -= 200 ;
88
+ headingX = x - 20 ;
89
+ break ;
90
+ }
91
+
92
+ ctx . textAlign = textAlign
93
+ ctx . font = '18px Arial' ;
94
+ drawTextLine ( ctx , para [ 0 ] , headingX , y ) ;
95
+
96
+ y += 10 ;
97
+ ctx . font = '14px Arial' ;
98
+ for ( var i = 1 ; i < para . length ; ++ i ) {
99
+ drawTextLine ( ctx , para [ i ] , x , y + ( 20 * i ) ) ;
100
+ }
101
+ }
102
+ } ) ( ) ;
0 commit comments