public/demo/intro/codef_core.js   F
last analyzed

Complexity

Total Complexity 66
Complexity/F 2.75

Size

Lines of Code 620
Function Count 24

Duplication

Duplicated Lines 142
Ratio 22.9 %

Importance

Changes 0
Metric Value
eloc 249
dl 142
loc 620
rs 3.12
c 0
b 0
f 0
wmc 66
mnd 42
bc 42
fnc 24
bpm 1.75
cpm 2.75
noi 27

2 Functions

Rating   Name   Duplication   Size   Complexity  
F codef_core.js ➔ canvas 71 363 38
F codef_core.js ➔ image 71 203 28

How to fix   Duplicated Code    Complexity   

Duplicated Code

Duplicate code is one of the most pungent code smells. A rule that is often used is to re-structure code once it is duplicated in three or more places.

Common duplication problems, and corresponding solutions are:

Complexity

 Tip:   Before tackling complexity, make sure that you eliminate any duplication first. This often can reduce the size of classes significantly.

Complex classes like public/demo/intro/codef_core.js often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.

Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.

1
/*------------------------------------------------------------------------------
2
Copyright (c) 2011 Antoine Santo Aka NoNameNo
3
4
This File is part of the CODEF project.
5
6
More info : http://codef.santo.fr
7
Demo gallery http://www.wab.com
8
9
Permission is hereby granted, free of charge, to any person obtaining a copy
10
of this software and associated documentation files (the "Software"), to deal
11
in the Software without restriction, including without limitation the rights
12
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
13
copies of the Software, and to permit persons to whom the Software is
14
furnished to do so, subject to the following conditions:
15
16
The above copyright notice and this permission notice shall be included in
17
all copies or substantial portions of the Software.
18
19
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
25
THE SOFTWARE.
26
------------------------------------------------------------------------------*/
27
28
window.requestAnimFrame = (function(){
29
	return  window.requestAnimationFrame       || 
30
		window.webkitRequestAnimationFrame || 
31
		window.mozRequestAnimationFrame    || 
32
		window.oRequestAnimationFrame      || 
33
		window.msRequestAnimationFrame     || 
34
		function(/* function */ callback, /* DOMElement */ element){
0 ignored issues
show
Unused Code introduced by
The parameter element is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
35
			window.setTimeout(callback, 1000 / 60);
36
		};
37
})();
38
39
/**
40
        <b>Create a new canvas object.</b><br>
41
	canvas(w, h, divname)<br>
42
43
        @class canvas
44
        @param {Number in pixel} w The Width of the canvas you want to create.
45
        @param {Number in pixel} h The Height of the canvas you want to create.
46
        @param {String} [divname] The div id you want the create the canvas to. If not specified, the canvas will be hidden.
47
	@property {Number in pixel} width The Width of the canvas.
48
	@property {Number in pixel} height The Height of the canvas.
49
	@property {Object} canvas object of this canvas. ;)
50
	@property {Object} contex the 2d context of this canvas.
51
	@property {Number in pixel} handlex the x coord of the handle (0 by default).
52
	@property {Number in pixel} handley the y coord of the handle (0 by default).
53
	@property {Number in pixel} tilew the Width of a tile (IF this canvas is a tileset).
54
	@property {Number in pixel} tileh the Height of a tile (IF this canvas is a tileset).
55
	@property {Number} tilestart the number of the first tile (usefull for tileset like font).
56
	@example
57
	var mycanvas = new canvas(640, 480, "main");
58
	
59
*/
60
function canvas(w, h, divname){
61
	this.width=w;
62
	this.height=h;
63
	this.canvas;
0 ignored issues
show
introduced by
The result of the property access to this.canvas is not used.
Loading history...
64
	this.contex;
0 ignored issues
show
introduced by
The result of the property access to this.contex is not used.
Loading history...
65
	this.canvas = document.createElement("canvas");
66
	if(divname) document.getElementById(divname).appendChild(this.canvas);
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
67
	this.canvas.setAttribute('width', w);
68
	this.canvas.setAttribute('height', h);
69
	this.contex = this.canvas.getContext('2d');
70
	
71
	this.handlex=0;
72
        this.handley=0;
73
	this.midhandled=false;
74
	this.tilew=0;
75
	this.tileh=0;
76
	this.tilestart=0;
77
	
78
	/**
79
                <b>Fill the canvas.</b><br>
80
		canvas.fill(color)<br>
81
82
                @function canvas.fill
83
                @param {Color} color The color you want to fill the canvas with.
84
		@example
85
		mycanvas.fill('#FF0000');
86
        */
87
	this.fill = function(color){
88
		var tmp = this.contex.fillStyle;
89
		var tmp2= this.contex.globalAlpha;
90
		this.contex.globalAlpha=1;
91
		this.contex.fillStyle = color;
92
		this.contex.fillRect (0, 0, this.canvas.width, this.canvas.height);
93
		this.contex.fillStyle = tmp
94
		this.contex.globalAlpha=tmp2;
95
	}
96
97
	/**
98
                <b>Clear the canvas.</b><br>
99
100
                @function canvas.clear
101
		@example
102
		mycanvas.clear();
103
        */
104
	this.clear = function(){
105
		this.contex.clearRect (0, 0, this.canvas.width, this.canvas.height);
106
	}
107
	
108
	/**
109
                <b>Draw a plot on the canvas.</b><br>
110
		canvas.plot(x1,y1,width,color)<br>
111
112
                @function canvas.plot
113
                @param {Number in pixel} x The x coord you want to plot in the canvas.
114
                @param {Number in pixel} y The y coord you want to plot in the canvas.
115
                @param {Number in pixel} width The size of the plot.
116
                @param {Color} color The color of the plot.
117
		@example
118
		mycanvas.plot(20,20,50,'#FF0000');
119
        */
120
	this.plot = function(x,y,width,color){
121
		// save old fillstyle
122
		var oldcolor = this.contex.fillStyle ;
123
124
		this.contex.fillStyle=color;
125
		this.contex.fillRect(x,y,width,width) ;
126
127
		// restore old fillstyle
128
		this.contex.fillStyle=oldcolor;
129
	}
130
	
131
	/**
132
                <b>Draw a line on the canvas.</b><br>
133
		canvas.line(x1,y1,x2,y2,width,color)<br>
134
135
                @function canvas.line
136
                @param {Number in pixel} x1 The x coord of the line start in the canvas.
137
                @param {Number in pixel} y1 The y coord of the line start in the canvas.
138
                @param {Number in pixel} x2 The x coord of the line end in the canvas.
139
                @param {Number in pixel} y2 The y coord of the line end in the canvas.
140
                @param {Number in pixel} width The width of the line.
141
                @param {Color} color The color of the plot.
142
		@example
143
		mycanvas.line(0,0,50,50,2,'#FF0000');
144
        */
145
	this.line = function(x1,y1,x2,y2,width,color){
146
		var tmp=this.contex.strokeStyle;
147
		this.contex.strokeStyle=color;
148
		this.contex.lineWidth=width;
149
		this.contex.beginPath();
150
		this.contex.moveTo(x1,y1);
151
		this.contex.lineTo(x2,y2);
152
		this.contex.stroke();
153
		this.contex.closePath();
154
		this.contex.strokeStyle=tmp;
155
	}
156
	
157
	/**
158
                <b>Draw a filled triangle on the canvas.</b><br>
159
		canvas.triangle(x1,y1,x2,y2,x3,y3,color)<br>
160
161
                @function canvas.triangle
162
                @param {Number in pixel} x1 The x coord of the 1st edge of the triangle in the canvas.
163
                @param {Number in pixel} y1 The y coord of the 1st edge of the triangle in the canvas.
164
                @param {Number in pixel} x2 The x coord of the 2nd edge of the triangle in the canvas.
165
                @param {Number in pixel} y2 The y coord of the 2nd edge of the triangle in the canvas.
166
                @param {Number in pixel} x3 The x coord of the 3rd edge of the triangle in the canvas.
167
                @param {Number in pixel} y3 The y coord of the 3rd edge of the triangle in the canvas.
168
                @param {Color} color The color of the plot.
169
		@example
170
		mycanvas.triangle(150,150,250,250,50,250,'#FF0000');
171
        */
172
	this.triangle = function(x1,y1,x2,y2,x3,y3,color){
173
		this.contex.beginPath();
174
		this.contex.moveTo(x1,y1);
175
		this.contex.lineTo(x2,y2);
176
		this.contex.lineTo(x3,y3);
177
		this.contex.closePath();
178
		this.contex.fillStyle=color;
179
		this.contex.fill();
180
	}
181
182
	/**
183
                <b>Draw a filled quad on the canvas.</b><br>
184
                <br>
185
		it can be used with 5 params : <br>
186
		canvas.quad(x1,y1,w,h,color)<br>
187
		<br>
188
		or it can be used with 9 params : <br>
189
                canvas.quad(x1,y1,x2,y2,x3,y3,x4,y4,color)<br>
190
                @function canvas.quad
191
                @param {Number in pixel} x1 The x coord of the 1st edge of the quad in the canvas.
192
                @param {Number in pixel} y1 The y coord of the 1st edge of the quad in the canvas.
193
                @param {Number in pixel} x2 The x coord of the 2nd edge of the quad in the canvas.
194
                @param {Number in pixel} y2 The y coord of the 2nd edge of the quad in the canvas.
195
                @param {Number in pixel} x3 The x coord of the 3rd edge of the quad in the canvas.
196
                @param {Number in pixel} y3 The y coord of the 3rd edge of the quad in the canvas.
197
                @param {Number in pixel} x4 The x coord of the 4th edge of the quad in the canvas.
198
                @param {Number in pixel} y4 The y coord of the 4th edge of the quad in the canvas.
199
                @param {Number in pixel} w The Width of the quad in the canvas.
200
                @param {Number in pixel} h The Height of the quad in the canvas.
201
                @param {Color} color The color of the plot.
202
		@example
203
		mycanvas.quad(150,150,250,250,'#FF0000');
204
		or
205
		mycanvas.quad(0,150,300,150,250,250,50,250,'#FF0000');
206
        */
207
	this.quad = function(x1,y1,x2,y2,x3,y3,x4,y4,color){
208
		// save old fillstyle
209
		var oldcolor = this.contex.fillStyle ;
210
211
		// if x1 y1 width height color
212
		if(arguments.length==5){
213
			this.contex.fillStyle=x3;
214
			this.contex.fillRect(x1,y1,x2,y2) ;
215
		}
216
		// if all quad coordinates
217
		else{
218
			this.contex.beginPath();
219
			this.contex.moveTo(x1,y1);
220
			this.contex.lineTo(x2,y2);
221
			this.contex.lineTo(x3,y3);
222
			this.contex.lineTo(x4,y4);
223
			this.contex.closePath();
224
			this.contex.fillStyle=color;
225
			this.contex.fill();		
226
		}
227
		// restore old fillstyle
228
		this.contex.fillStyle=oldcolor;
229
	}	
230
	
231
	/**
232
                <b>Init a tileset canvas.</b><br>
233
                canvas.initTile(tilew,tileh, tilestart)<br>
234
235
                @function canvas.initTile
236
                @param {Number in pixel} tilew The Width of one tile.
237
                @param {Number in pixel} tileh The Height of one tile.
238
                @param {Number} [tilestart] The number of the first tile. (0 by default)
239
		@example
240
		mycanvas.initTile(32,32);
241
        */
242
	this.initTile=function(tilew,tileh, tilestart){
243
		this.tileh=tileh;
244
		this.tilew=tilew;
245
		if(typeof(tilestart)!='undefined')
246
			this.tilestart=tilestart;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
247
	}
248
	
249
	/**
250
                <b>Draw the canvas to another canvas.</b><br>
251
                canvas.draw(dst,x,y,alpha, rot,w,h)<br>
252
253
                @function canvas.draw
254
		@param {Object} dst The destination canvas.
255
                @param {Number in pixel} x The x coord in the destination canvas (based on the handle coord).
256
                @param {Number in pixel} y The y coord in the destination canvas (based on the handle coord).
257
                @param {Number} [alpha] The normalized value of the alpha (1 by default).
258
		@param {Number} [rot] The rotation angle in degrees (0 by default) (will use the handle coord as rotation axis).
259
		@param {Number} [w] The normalized zoom factor on x (1 by default).
260
		@param {Number} [h] The normalized zoom factor on y (1 by default).
261
		@example
262
		mycanvas.draw(destcanvas,10,10,1,0,1,1);
263
        */
264 View Code Duplication
        this.draw = function(dst,x,y,alpha, rot,w,h){
0 ignored issues
show
Duplication introduced by
This code seems to be duplicated in your project.
Loading history...
265
                var tmp=dst.contex.globalAlpha;
266
		if(typeof(alpha)=='undefined') alpha=1;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
267
                dst.contex.globalAlpha=alpha;
268
                if(arguments.length==3 || arguments.length==4)
269
                        dst.contex.drawImage(this.canvas, x-this.handlex,y-this.handley);
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
270
		else if(arguments.length==5){
271
			dst.contex.translate(x,y);
272
                        dst.contex.rotate(rot*Math.PI/180);
273
                        dst.contex.translate(-this.handlex,-this.handley);
274
                        dst.contex.drawImage(this.canvas, 0,0);
275
                        dst.contex.setTransform(1, 0, 0, 1, 0, 0);
276
		}
277
                else{
278
                        dst.contex.translate(x,y);
279
                        dst.contex.rotate(rot*Math.PI/180);
280
                        dst.contex.scale(w,h);
281
                        dst.contex.translate(-this.handlex,-this.handley);
282
                        dst.contex.drawImage(this.canvas, 0,0);
283
                        dst.contex.setTransform(1, 0, 0, 1, 0, 0);
284
                }
285
                dst.contex.globalAlpha=tmp;
286
        }
287
        
288
	/**
289
                <b>Draw a tile from this canvas to another canvas.</b><br>
290
                canvas.drawTile(dst, nb, x, y, alpha, rot, w, h)<br>
291
292
                @function canvas.drawTile
293
                @param {Object} dst The destination canvas.
294
		@param {Number} nb the tile number.
295
                @param {Number in pixel} x The x coord in the destination canvas (based on the handle coord).
296
                @param {Number in pixel} y The y coord in the destination canvas (based on the handle coord).
297
                @param {Number} [alpha] The normalized value of the alpha (1 by default).
298
                @param {Number} [rot] The rotation angle in degrees (0 by default) (will use the handle coord as rotation axis).
299
                @param {Number} [w] The normalized zoom factor on x (1 by default).
300
                @param {Number} [h] The normalized zoom factor on y (1 by default).
301
		@example
302
		mycanvas.drawTile(destcanvas,5,10,10,1,0,1,1);
303
        */
304
        this.drawTile = function(dst, nb, x, y, alpha, rot, w, h){
305
		var tmp=dst.contex.globalAlpha;
306
		if(typeof(alpha)=='undefined') alpha=1;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
307
                dst.contex.globalAlpha=alpha;
308
                this.drawPart(dst,x,y,Math.floor((nb%(this.canvas.width/this.tilew)))*this.tilew,Math.floor(nb/(this.canvas.width/this.tilew))*this.tileh,this.tilew,this.tileh,alpha, rot, w, h);
309
		dst.contex.globalAlpha=tmp;
310
311
	}
312
        
313
	/**
314
                <b>Draw a part of this canvas to another canvas.</b><br>
315
                canvas.drawPart(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy)<br>
316
317
                @function canvas.drawPart
318
                @param {Object} dst The destination canvas.
319
                @param {Number in pixel} x The x coord in the destination canvas (based on the handle coord).
320
                @param {Number in pixel} y The y coord in the destination canvas (based on the handle coord).
321
		@param {Number in pixel} partx The x coord of the part in the source canvas.
322
		@param {Number in pixel} party The y coord of the part in the source canvas.
323
		@param {Number in pixel} partw The width of the part in the source canvas.
324
		@param {Number in pixel} parth The height of the part in the source canvas.
325
                @param {Number} [alpha] The normalized value of the alpha (1 by default).
326
                @param {Number} [rot] The rotation angle in degrees (0 by default) (will use the handle coord as rotation axis).
327
                @param {Number} [zx] The normalized zoom factor on x (1 by default).
328
                @param {Number} [zy] The normalized zoom factor on y (1 by default).
329
		@example
330
		mycanvas.drawTile(mycanvas,10,10,0,0,50,50,1,0,1,1);
331
        */
332 View Code Duplication
        this.drawPart = function(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy){
0 ignored issues
show
Duplication introduced by
This code seems to be duplicated in your project.
Loading history...
333
        	if(partx<0) {
334
        		x-=partx/(this.midhandled==true?2:1);
0 ignored issues
show
Best Practice introduced by
Comparing this.midhandled to true using the == operator is not safe. Consider using === instead.
Loading history...
335
        		partw+=partx;
336
        		partx=0;
337
            } else {
338
                if (this.midhandled==false) {
0 ignored issues
show
Best Practice introduced by
Comparing this.midhandled to false using the == operator is not safe. Consider using === instead.
Loading history...
339
                    partw = Math.min(partw,this.width-partx);
340
                }
341
        	}
342
        	if(party<0) {
343
        		y-=party/(this.midhandled==true?2:1);
344
        		parth+=party;
345
        		party=0;
346
            } else {
347
                if (this.midhandled==false) {
348
                    parth = Math.min(parth,this.height-party);
349
                }
350
        	}
351
        	if(partw<=0 || parth<=0){
352
        		return;
353
        	}
354
                var tmp=dst.contex.globalAlpha;
355
		if(typeof(alpha)=='undefined') alpha=1;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
356
                dst.contex.globalAlpha=alpha;
357
                if(arguments.length==7 || arguments.length==8){
358
                       	dst.contex.translate(x,y);
359
			if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
360
			dst.contex.drawImage(this.canvas,partx,party,partw,parth,0,0,partw,parth);
361
			dst.contex.setTransform(1, 0, 0, 1, 0, 0);
362
		}
363
		else if(arguments.length==9){
364
                       	dst.contex.translate(x,y);
365
			dst.contex.rotate(rot*Math.PI/180);
366
			if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
367
			dst.contex.drawImage(this.canvas,partx,party,partw,parth,0,0,partw,parth);
368
			dst.contex.setTransform(1, 0, 0, 1, 0, 0);
369
		}
370
                else{
371
                       	dst.contex.translate(x,y);
372
			dst.contex.rotate(rot*Math.PI/180);
373
			dst.contex.scale(zx,zy);
374
			if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
375
			dst.contex.drawImage(this.canvas,partx,party,partw,parth,0,0,partw,parth);
376
			dst.contex.setTransform(1, 0, 0, 1, 0, 0);
377
                }
378
                dst.contex.globalAlpha=tmp;
379
        }
380
381
	 /**
382
                <b>Set the handle coord of this canvas to the center.</b><br>
383
384
                @function canvas.setmidhandle
385
		@example
386
		mycanvas.setmidhandle();
387
        */
388
	this.setmidhandle=function(){
389
                this.handlex=parseInt(this.canvas.width/2);
390
                this.handley=parseInt(this.canvas.height/2);
391
		this.midhandled=true;
392
        }
393
394
	/**
395
                <b>Set the handle of the canvas.</b><br>
396
                canvas.sethandle(x,y)<br>
397
398
                @function canvas.sethandle
399
                @param {Number in pixel} x The x coord of the handle of the canvas.
400
                @param {Number in pixel} y The y coord of the handle of the canvas.
401
		@example
402
		mycanvas.sethandle(50,50);
403
        */
404
        this.sethandle=function(x,y){
405
                this.handlex=x;
406
                this.handley=y;
407
		this.midhandled=false;
408
        }
409
        
410
        this.print=function(dst, str, x, y, alpha, rot, w, h){
411
		for(var i=0; i<str.length; i++){
412
			if(typeof(w)!='undefined')
413
				this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew*w,y,alpha,rot,w,h);
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
414
			else
415
				this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew,y,alpha,rot,w,h);
416
		}
417
	}
418
419
	
420
	return this;
421
	
422
}
423
424
425
/**
426
        <b>Create an image object and load a remote/local png/gif/jpg in it.</b><br>
427
        image(img)<br>
428
429
        @class image
430
        @param {string} img local or url to an jpg/png/gif image.
431
        @property {Object} img the dom image object.
432
        @property {Number in pixel} handlex the x coord of the handle (0 by default).
433
        @property {Number in pixel} handley the y coord of the handle (0 by default).
434
        @property {Number in pixel} tilew the Width of a tile (IF this canvas is a tileset).
435
        @property {Number in pixel} tileh the Height of a tile (IF this canvas is a tileset).
436
        @property {Number} tilestart the number of the first tile (usefull for tileset like font).
437
	@example
438
	// with a local file
439
	var mylogo = new image('logo.png');
440
441
	// with a remote image
442
	var mylogo = new image('http://www.myremotesite.com/logo.png');
443
444
*/
445
function image(img){
446
	this.img = new Image();
0 ignored issues
show
Bug introduced by
The variable Image seems to be never declared. If this is a global, consider adding a /** global: Image */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
447
	this.img.src=img;
448
        this.handlex=0;
449
        this.handley=0;
450
	this.midhandled=false;
451
	this.tilew=0;
452
	this.tileh=0;
453
	this.tilestart=0;
454
	
455
	/**
456
                <b>Init a tileset image.</b><br>
457
                image.initTile(tilew,tileh, tilestart)<br>
458
459
                @function image.initTile
460
                @param {Number in pixel} tilew The Width of one tile.
461
                @param {Number in pixel} tileh The Height of one tile.
462
                @param {Number} [tilestart] The number of the first tile. (0 by default)
463
		@example
464
		myimage.initTile(32,32);
465
        */
466
	this.initTile=function(tilew,tileh,tilestart){
467
		this.tileh=tileh;
468
		this.tilew=tilew;
469
		if(typeof(tilestart)!='undefined')
470
			this.tilestart=tilestart;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
471
			
472
	}
473
474
/**
475
                <b>Draw the image to a canvas.</b><br>
476
                image.draw(dst,x,y,alpha, rot,w,h)<br>
477
478
                @function image.draw
479
                @param {Object} dst The destination canvas.
480
                @param {Number in pixel} x The x coord in the destination canvas (based on the handle coord of the image).
481
                @param {Number in pixel} y The y coord in the destination canvas (based on the handle coord of the image).
482
                @param {Number} [alpha] The normalized value of the alpha (1 by default).
483
                @param {Number} [rot] The rotation angle in degrees (0 by default) (will use the handle coord as rotation axis).
484
                @param {Number} [w] The normalized zoom factor on x (1 by default).
485
                @param {Number} [h] The normalized zoom factor on y (1 by default).
486
		@example
487
		myimage.draw(destcanvas,10,10,1,0,1,1);
488
        */
489 View Code Duplication
        this.draw = function(dst,x,y,alpha, rot,w,h){
0 ignored issues
show
Duplication introduced by
This code seems to be duplicated in your project.
Loading history...
490
                var tmp=dst.contex.globalAlpha;
491
		if(typeof(alpha)=='undefined') alpha=1;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
492
                dst.contex.globalAlpha=alpha;
493
                if(arguments.length==3 || arguments.length==4)
494
                        dst.contex.drawImage(this.img, x-this.handlex,y-this.handley);
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
495
		else if(arguments.length==5){
496
			dst.contex.translate(x,y);
497
                        dst.contex.rotate(rot*Math.PI/180);
498
                        dst.contex.translate(-this.handlex,-this.handley);
499
                        dst.contex.drawImage(this.img, 0,0);
500
                        dst.contex.setTransform(1, 0, 0, 1, 0, 0);
501
		}
502
                else{
503
                        dst.contex.translate(x,y);
504
                        dst.contex.rotate(rot*Math.PI/180);
505
                        dst.contex.scale(w,h);
506
                        dst.contex.translate(-this.handlex,-this.handley);
507
                        dst.contex.drawImage(this.img, 0,0);
508
                        dst.contex.setTransform(1, 0, 0, 1, 0, 0);
509
                }
510
                dst.contex.globalAlpha=tmp;
511
        }
512
        
513
	/**
514
                <b>Draw a tile from this image to a canvas.</b><br>
515
                image.drawTile(dst, nb, x, y, alpha, rot, w, h)<br>
516
517
                @function image.drawTile
518
                @param {Object} dst The destination canvas.
519
                @param {Number} nb the tile number.
520
                @param {Number in pixel} x The x coord in the destination canvas (based on the handle coord of the image).
521
                @param {Number in pixel} y The y coord in the destination canvas (based on the handle coord of the image).
522
                @param {Number} [alpha] The normalized value of the alpha (1 by default).
523
                @param {Number} [rot] The rotation angle in degrees (0 by default) (will use the handle coord as rotation axis).
524
                @param {Number} [w] The normalized zoom factor on x (1 by default).
525
                @param {Number} [h] The normalized zoom factor on y (1 by default).
526
		@example
527
		myimage.drawTile(destcanvas,5,10,10,1,0,1,1);
528
        */
529
        this.drawTile = function(dst, nb, x, y, alpha, rot, w, h){
530
		var tmp=dst.contex.globalAlpha;
531
		if(typeof(alpha)=='undefined') alpha=1;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
532
                dst.contex.globalAlpha=alpha;
533
                this.drawPart(dst,x,y,Math.floor((nb%(this.img.width/this.tilew)))*this.tilew,Math.floor(nb/(this.img.width/this.tilew))*this.tileh,this.tilew,this.tileh,alpha, rot, w, h);
534
		dst.contex.globalAlpha=tmp;
535
536
	}
537
        
538
	/**
539
                <b>Draw a part of this image to a canvas.</b><br>
540
                image.drawPart(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy)<br>
541
542
                @function image.drawPart
543
                @param {Object} dst The destination canvas.
544
                @param {Number in pixel} x The x coord in the destination canvas (based on the handle coord of the image).
545
                @param {Number in pixel} y The y coord in the destination canvas (based on the handle coord of the image).
546
                @param {Number in pixel} partx The x coord of the part in the source canvas.
547
                @param {Number in pixel} party The y coord of the part in the source canvas.
548
                @param {Number in pixel} partw The width of the part in the source canvas.
549
                @param {Number in pixel} parth The height of the part in the source canvas.
550
                @param {Number} [alpha] The normalized value of the alpha (1 by default).
551
                @param {Number} [rot] The rotation angle in degrees (0 by default) (will use the handle coord as rotation axis).
552
                @param {Number} [zx] The normalized zoom factor on x (1 by default).
553
                @param {Number} [zy] The normalized zoom factor on y (1 by default).
554
		@example
555
		myimage.drawTile(mycanvas,10,10,0,0,50,50,1,0,1,1);
556
        */
557 View Code Duplication
        this.drawPart = function(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy){
0 ignored issues
show
Duplication introduced by
This code seems to be duplicated in your project.
Loading history...
558
        	if(partx<0) {
559
        		x-=partx/(this.midhandled==true?2:1);
0 ignored issues
show
Best Practice introduced by
Comparing this.midhandled to true using the == operator is not safe. Consider using === instead.
Loading history...
560
        		partw+=partx;
561
        		partx=0;
562
            } else {
563
                if (this.midhandled==false) {
0 ignored issues
show
Best Practice introduced by
Comparing this.midhandled to false using the == operator is not safe. Consider using === instead.
Loading history...
564
                    partw = Math.min(partw,this.img.width-partx);
565
                }
566
        	}
567
        	if(party<0) {
568
        		y-=party/(this.midhandled==true?2:1);
569
        		parth+=party;
570
        		party=0;
571
            } else {
572
                if (this.midhandled==false) {
573
                    parth = Math.min(parth,this.img.height-party);
574
                }
575
        	}
576
        	if(partw<=0 || parth<=0){
577
        		return;
578
        	}
579
                var tmp=dst.contex.globalAlpha;
580
		if(typeof(alpha)=='undefined') alpha=1;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
581
                dst.contex.globalAlpha=alpha;
582
                if(arguments.length==7 || arguments.length==8){
583
                       	dst.contex.translate(x,y);
584
			if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
585
			dst.contex.drawImage(this.img,partx,party,partw,parth,null,null,partw,parth);
586
			dst.contex.setTransform(1, 0, 0, 1, 0, 0);
587
		}
588
		else if(arguments.length==9){
589
                       	dst.contex.translate(x,y);
590
			dst.contex.rotate(rot*Math.PI/180);
591
			if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
592
			dst.contex.drawImage(this.img,partx,party,partw,parth,null,null,partw,parth);
593
			dst.contex.setTransform(1, 0, 0, 1, 0, 0);
594
		}
595
                else{
596
                       	dst.contex.translate(x,y);
597
			dst.contex.rotate(rot*Math.PI/180);
598
			dst.contex.scale(zx,zy);
599
			if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
600
			dst.contex.drawImage(this.img,partx,party,partw,parth,null,null,partw,parth);
601
			dst.contex.setTransform(1, 0, 0, 1, 0, 0);
602
                }
603
                dst.contex.globalAlpha=tmp;
604
        }
605
        
606
        
607
	
608
	/**
609
                <b>Set the handle coord of this image to the center.</b><br>
610
611
                @function image.setmidhandle
612
		@example
613
		myimage.setmidhandle();
614
        */
615
	this.setmidhandle=function(){
616
                this.handlex=parseInt(this.img.width/2);
617
                this.handley=parseInt(this.img.height/2);
618
		this.midhandled=true;
619
        }
620
621
	/**
622
                <b>Set the handle of the image.</b><br>
623
                image.sethandle(x,y)<br>
624
625
                @function image.sethandle
626
                @param {Number in pixel} x The x coord of the handle of the image.
627
                @param {Number in pixel} y The y coord of the handle of the image.
628
		@example
629
		myimage.sethandle(50,50);
630
        */
631
        this.sethandle=function(x,y){
632
                this.handlex=x;
633
                this.handley=y;
634
		this.midhandled=false;
635
        }
636
        
637
        this.print=function(dst, str, x, y, alpha, rot, w, h){
638
		for(var i=0; i<str.length; i++){
639
			if(typeof(w)!='undefined')
640
				this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew*w,y,alpha,rot,w,h);
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
641
			else
642
				this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew,y,alpha,rot,w,h);
643
		}
644
	}
645
646
	return this;
647
}
648