1+ /**
2+ * Canvas
3+ *
4+ * @param {Number } width
5+ * @param {Number } height
6+ * @param {Element } element
7+ */
8+ function Canvas ( width , height , element )
9+ {
10+ this . element = typeof ( element ) !== 'undefined' ? element : document . createElement ( 'canvas' ) ;
11+ this . context = this . element . getContext ( '2d' ) ;
12+ this . scale = 1 ;
13+
14+ if ( typeof ( width ) !== 'undefined' && width ) {
15+ this . setWidth ( width ) ;
16+ }
17+
18+ if ( typeof ( height ) !== 'undefined' && height ) {
19+ this . setHeight ( height ) ;
20+ }
21+ }
22+
23+ /**
24+ * Set width
25+ *
26+ * @param {Number } width
27+ */
28+ Canvas . prototype . setWidth = function ( width )
29+ {
30+ this . element . width = width ;
31+ } ;
32+
33+ /**
34+ * Set height
35+ *
36+ * @param {Number } height
37+ */
38+ Canvas . prototype . setHeight = function ( height )
39+ {
40+ this . element . height = height ;
41+ } ;
42+
43+ /**
44+ * Set scale
45+ *
46+ * @param {Float } scale
47+ */
48+ Canvas . prototype . setScale = function ( scale )
49+ {
50+ this . scale = scale ;
51+ } ;
52+
53+ /**
54+ * Set dimension
55+ *
56+ * @param {Number } width
57+ * @param {Number } height
58+ * @param {Number } scale
59+ */
60+ Canvas . prototype . setDimension = function ( width , height , scale , update )
61+ {
62+ if ( update ) {
63+ var save = new Canvas ( this . element . width , this . element . height ) ;
64+ save . drawImage ( this . element , [ 0 , 0 ] ) ;
65+ }
66+
67+ this . element . width = width ;
68+ this . element . height = height ;
69+
70+ if ( typeof ( scale ) != 'undefined' ) {
71+ this . setScale ( scale ) ;
72+ }
73+
74+ if ( update ) {
75+ this . drawImage ( save . element , [ 0 , 0 ] , this . element . width , this . element . height ) ;
76+ save = null ;
77+ }
78+ } ;
79+
80+ /**
81+ * Clear
82+ */
83+ Canvas . prototype . clear = function ( )
84+ {
85+ this . context . clearRect ( 0 , 0 , this . element . width , this . element . height ) ;
86+ } ;
87+
88+ /**
89+ * Color
90+ */
91+ Canvas . prototype . color = function ( color )
92+ {
93+ this . context . beginPath ( ) ;
94+ this . context . rect ( 0 , 0 , this . element . width , this . element . height ) ;
95+ this . context . fillStyle = color ;
96+ this . context . fill ( ) ;
97+ } ;
98+
99+ /**
100+ * Save context
101+ */
102+ Canvas . prototype . save = function ( )
103+ {
104+ this . context . save ( ) ;
105+ } ;
106+
107+ /**
108+ * Restore context
109+ */
110+ Canvas . prototype . restore = function ( )
111+ {
112+ this . context . restore ( ) ;
113+ } ;
114+
115+ /**
116+ * Reverse image
117+ */
118+ Canvas . prototype . reverse = function ( )
119+ {
120+ this . context . save ( ) ;
121+ this . context . translate ( this . element . width , 0 ) ;
122+ this . context . scale ( - 1 , 1 ) ;
123+ } ;
124+
125+ /**
126+ * Draw image to scale
127+ *
128+ * @param {Resource } image
129+ * @param {Array } position
130+ * @param {Number } width
131+ * @param {Number } height
132+ * @param {Number } angle
133+ */
134+ Canvas . prototype . drawImageScaled = function ( image , position , width , height , angle )
135+ {
136+ this . drawImage ( image , [ position [ 0 ] * this . scale , position [ 1 ] * this . scale ] , width * this . scale , height * this . scale , angle ) ;
137+ } ;
138+
139+ /**
140+ * Draw image to size
141+ *
142+ * @param {Resource } image
143+ * @param {Aray } position
144+ * @param {Number } width
145+ * @param {Number } height
146+ * @param {Number } angle
147+ */
148+ Canvas . prototype . drawImage = function ( image , position , width , height , angle )
149+ {
150+ angle = typeof ( angle ) !== 'undefined' && angle ? angle : false ;
151+
152+ if ( angle ) {
153+ var centerX = position [ 0 ] + width / 2 ,
154+ centerY = position [ 1 ] + height / 2 ;
155+
156+ position [ 0 ] = - width / 2 ;
157+ position [ 1 ] = - height / 2 ;
158+
159+ this . context . save ( ) ;
160+ this . context . translate ( centerX , centerY ) ;
161+ this . context . rotate ( angle ) ;
162+ }
163+
164+ if ( typeof ( width ) === 'number' && typeof ( height ) === 'number' ) {
165+ this . context . drawImage ( image , this . round ( position [ 0 ] ) , this . round ( position [ 1 ] ) , this . round ( width ) , this . round ( height ) ) ;
166+ } else {
167+ this . context . drawImage ( image , this . round ( position [ 0 ] ) , this . round ( position [ 1 ] ) ) ;
168+ }
169+
170+ if ( angle ) {
171+ this . context . restore ( ) ;
172+ }
173+ } ;
174+
175+ /**
176+ * Draw circle
177+ *
178+ * @param {Array } position
179+ * @param {Number } radius
180+ * @param {String } fill
181+ * @param {String } stroke
182+ * @param {Number } alpha
183+ */
184+ Canvas . prototype . drawCircle = function ( position , radius , fill , stroke , alpha )
185+ {
186+ if ( typeof ( alpha ) != 'undefined' ) {
187+ var previous = this . context . globalAlpha ;
188+ this . context . globalAlpha = alpha ;
189+ }
190+
191+ this . context . beginPath ( ) ;
192+ this . context . arc ( position [ 0 ] , position [ 1 ] , radius , 0 , 2 * Math . PI , false ) ;
193+
194+ if ( typeof ( fill ) != 'undefined' ) {
195+ this . context . fillStyle = fill ;
196+ this . context . fill ( ) ;
197+ }
198+
199+ if ( typeof ( stroke ) != 'undefined' ) {
200+ this . context . lineWidth = 1 ;
201+ this . context . strokeStyle = stroke ;
202+ this . context . stroke ( ) ;
203+ }
204+
205+ if ( typeof ( alpha ) != 'undefined' ) {
206+ this . context . globalAlpha = previous ;
207+ }
208+ } ;
209+
210+ /**
211+ * Draw line
212+ *
213+ * @param {Array } points
214+ * @param {Number } width
215+ * @param {String } color
216+ * @param {Number } alpha
217+ */
218+ Canvas . prototype . drawLine = function ( points , width , color , alpha )
219+ {
220+ var length = points . length ;
221+
222+ if ( length > 1 ) {
223+ if ( typeof ( alpha ) != 'undefined' ) {
224+ var previous = this . context . globalAlpha ;
225+ this . context . globalAlpha = alpha ;
226+ }
227+
228+ if ( typeof ( color ) != 'undefined' ) {
229+ this . context . strokeStyle = color ;
230+ }
231+
232+ this . context . lineWidth = typeof ( width ) !== 'undefined' ? width : 1 ;
233+ this . context . lineCap = 'round' ;
234+ this . context . beginPath ( ) ;
235+ this . context . moveTo ( points [ 0 ] [ 0 ] , points [ 0 ] [ 1 ] ) ;
236+
237+ for ( var i = 1 ; i < length ; i ++ ) {
238+ this . context . lineTo ( points [ i ] [ 0 ] , points [ i ] [ 1 ] ) ;
239+ }
240+
241+ this . context . stroke ( ) ;
242+
243+ if ( typeof ( alpha ) != 'undefined' ) {
244+ this . context . globalAlpha = previous ;
245+ }
246+ }
247+ } ;
248+
249+ /**
250+ * Draw line scaled
251+ *
252+ * @param {Array } points
253+ * @param {Number } width
254+ * @param {String } color
255+ * @param {Number } alpha
256+ */
257+ Canvas . prototype . drawLineScaled = function ( points , width , color , alpha )
258+ {
259+ for ( var i = points . length - 1 ; i >= 0 ; i -- ) {
260+ points [ i ] = [ points [ i ] [ 0 ] * this . scale , points [ i ] [ 1 ] * this . scale ] ;
261+ }
262+
263+ this . drawLine ( points , width * this . scale , color , alpha ) ;
264+ } ;
265+
266+ /**
267+ * To string
268+ *
269+ * @return {String }
270+ */
271+ Canvas . prototype . toString = function ( )
272+ {
273+ return this . element . toDataURL ( ) ;
274+ } ;
275+
276+ /**
277+ * Round
278+ *
279+ * @param {Number } value
280+ *
281+ * @return {Number }
282+ */
283+ Canvas . prototype . round = function ( value )
284+ {
285+ return ( 0.5 + value ) | 0 ;
286+ } ;
287+
288+ /**
289+ * Round float
290+ *
291+ * @param {Float } value
292+ * @param {Number } precision
293+ *
294+ * @return {Float }
295+ */
296+ Canvas . prototype . roundFloat = function ( value , precision )
297+ {
298+ var coef = Math . pow ( 10 , typeof ( precision ) != 'undefined' ? precision : 2 ) ;
299+
300+ return ( ( 0.5 + value * coef ) | 0 ) / coef ;
301+ } ;
0 commit comments