Link to home
Create AccountLog in
Avatar of cj_ervin
cj_ervin

asked on

Multiple HTML5 Canvas on One Page with jQuery and ColdFusion Dynamic

I am trying to have multiple Canvas on one page. I need to show graphic representation for multiple results from a query. I query a database table to see how may graphics I need to show the results. It could be just one or could be up to 8. Each one of these canvas will look different.

To make the code more simplistic, I am using the same information to show in each canvas (so each canvas will look the same). If I can get this part to work, then I will move on to making the actual graphic representation dynamic and based off the result of each query. So I just need to get this portion working. So that each canvas will show up on the page.

<!DOCTYPE HTML>
&#9;<html>
&#9;<head>
&#9;&#9;<title>TEST</title>
&#9;&#9;
&#9;&#9;<script type="text/javascript" src="Javascript/jquery.js"></script>
&#9;&#9;<script src="Javascript/fixColdfusionAjax.js" type="text/javascript"></script>&#9;

&#9;</head>
&#9;<BODY">

&#9;<cfoutput>
&#9;&#9;
&#9;&#9;<cfset vNumberOfAreas = 3>
&#9;&#9;<cfset vDisplayLayers = 5>
&#9;&#9;
&#9;&#9;<cfloop index="i" from="1" to="#vNumberOfAreas#">
&#9;&#9;&#9;<cfset vLoopNumber = i>
&#9;&#9;&#9;<script>
&#9;&#9;&#9;&#9;&#9;alert("test");
&#9;&#9;&#9;&#9;&#9;draw_canvas();
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;function draw_canvas() {
&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;var roof_layer_display_context_#vLoopNumber#=document.getElementById("roof_layer_display_#vLoopNumber#").getContext('2d'); 
&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;var roof_layer_#vLoopNumber# = new Image();
&#9;&#9;&#9;&#9;&#9;var roof_layer2_#vLoopNumber# = new Image();
&#9;&#9;&#9;&#9;&#9;var roof_layer3_#vLoopNumber# = new Image();
&#9;&#9;&#9;&#9;&#9;roof_layer_#vLoopNumber#.src = 'Images/Layers/Gray.png'; // Path to image you want to use as a background
&#9;&#9;&#9;&#9;&#9;roof_layer2_#vLoopNumber#.src = 'Images/Layers/Brown.png'; // Path to image you want to use as a background
&#9;&#9;&#9;&#9;&#9;roof_layer3_#vLoopNumber#.src = 'Images/Layers/Green.png'; // Path to image you want to use as a background
&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;roof_layer_display_context_#vLoopNumber#.fillStyle = '##FFF';
&#9;&#9;&#9;&#9;&#9;roof_layer_display_context_#vLoopNumber#.font = 'bold 16px sans-serif';
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;roof_layer_display_context_#vLoopNumber#.drawImage(roof_layer_#vLoopNumber#, 20, 5);
&#9;&#9;&#9;&#9;&#9;roof_layer_display_context_#vLoopNumber#.fillText('Hello world!', 135, 25);
&#9;&#9;&#9;&#9;&#9;roof_layer_display_context_#vLoopNumber#.drawImage(roof_layer2_#vLoopNumber#, 20, 33);
&#9;&#9;&#9;&#9;&#9;roof_layer_display_context_#vLoopNumber#.fillText('Hello world!', 135, 53);
&#9;&#9;&#9;&#9;&#9;roof_layer_display_context_#vLoopNumber#.drawImage(roof_layer3_#vLoopNumber#, 20, 61);
&#9;&#9;&#9;&#9;&#9;roof_layer_display_context_#vLoopNumber#.fillText('Hello world!', 135, 81);

&#9;&#9;&#9;&#9;&#9;alert("Inside Canvas");
&#9;&#9;&#9;&#9;}
&#9;&#9;&#9;</script>
&#9;&#9;</cfloop>

&#9;&#9;<cfloop index="i" from="1" to="#vNumberOfAreas#">
&#9;&#9;
&#9;&#9;&#9;<div id="divspacer">&nbsp;</div>
&#9;&#9;&#9;
&#9;&#9;&#9;<cfset vStartLayer = 5>
&#9;&#9;&#9;<cfset vStartTextLayer = 25>&#9;&#9;&#9;&#9;&#9;&#9;&#9;
&#9;&#9;
&#9;&#9;&#9;<cfset vLayerDisplayHeight = vDisplayLayers * 30>
&#9;&#9;&#9;&#9;&#9;<div><canvas id="roof_layer_display_#i#" width="353" height="#vLayerDisplayHeight#" style="border:solid 1px ##000000;"></canvas></div>
&#9;&#9;&#9;&#9;<div>
&#9;&#9;&#9;&#9;&#9;<font size="2">Test - #i#</font>
&#9;&#9;&#9;&#9;</div>
&#9;&#9;&#9;</div>&#9;&#9;&#9;&#9;&#9;&#9;
&#9;&#9;</cfloop>
&#9;</cfoutput>

</BODY>
</HTML>

Open in new window


Please, Can anyone help with this?
Avatar of reiters
reiters
Flag of United States of America image

<cfloop index="i" from="1" to="#vNumberOfAreas#">
			<cfset vLoopNumber = i>
			<script>
					alert("test");
					draw_canvas();
					
					function draw_canvas() {
				
					var roof_layer_display_context_#vLoopNumber#=document.getElementById("roof_layer_display_#vLoopNumber#").getContext('2d'); 
				
					var roof_layer_#vLoopNumber# = new Image();
					var roof_layer2_#vLoopNumber# = new Image();
					var roof_layer3_#vLoopNumber# = new Image();
					roof_layer_#vLoopNumber#.src = 'Images/Layers/Gray.png'; // Path to image you want to use as a background
					roof_layer2_#vLoopNumber#.src = 'Images/Layers/Brown.png'; // Path to image you want to use as a background
					roof_layer3_#vLoopNumber#.src = 'Images/Layers/Green.png'; // Path to image you want to use as a background
				
					roof_layer_display_context_#vLoopNumber#.fillStyle = '##FFF';
					roof_layer_display_context_#vLoopNumber#.font = 'bold 16px sans-serif';
					
					
					roof_layer_display_context_#vLoopNumber#.drawImage(roof_layer_#vLoopNumber#, 20, 5);
					roof_layer_display_context_#vLoopNumber#.fillText('Hello world!', 135, 25);
					roof_layer_display_context_#vLoopNumber#.drawImage(roof_layer2_#vLoopNumber#, 20, 33);
					roof_layer_display_context_#vLoopNumber#.fillText('Hello world!', 135, 53);
					roof_layer_display_context_#vLoopNumber#.drawImage(roof_layer3_#vLoopNumber#, 20, 61);
					roof_layer_display_context_#vLoopNumber#.fillText('Hello world!', 135, 81);

					alert("Inside Canvas");
				}
			</script>
		</cfloop>

Open in new window



defines the function draw_canvas() over and over which I don't believe is allowed.  You need to move the funciton outside of the loop and pass the rownumber in.

			<script>
					function draw_canvas(vLoopNumber) {
				
					var roof_layer_display_context=document.getElementById(eval("roof_layer_display_" + vLoopNumber).getContext('2d'); 
				
					var roof_layer = new Image();
					var roof_layer2 = new Image();
					var roof_layer3 = new Image();
					roof_layer.src = 'Images/Layers/Gray.png'; // Path to image you want to use as a background
					roof_layer2.src = 'Images/Layers/Brown.png'; // Path to image you want to use as a background
					roof_layer3.src = 'Images/Layers/Green.png'; // Path to image you want to use as a background
				
					roof_layer_display_context.fillStyle = '##FFF';
					roof_layer_display_context.font = 'bold 16px sans-serif';
					
					
					roof_layer_display_context.drawImage(roof_layer_#vLoopNumber#, 20, 5);
					roof_layer_display_context.fillText('Hello world!', 135, 25);
					roof_layer_display_context.drawImage(roof_layer2_#vLoopNumber#, 20, 33);
					roof_layer_display_contex.fillText('Hello world!', 135, 53);
					roof_layer_display_context.drawImage(roof_layer3_#vLoopNumber#, 20, 61);
					roof_layer_display_context.fillText('Hello world!', 135, 81);

					alert("Inside Canvas");
				}

				<cfloop index="i" from="1" to="#vNumberOfAreas#">
					alert("test");
					draw_canvas(<cfoutput>#i#</cfoutput>);		
				</cfloop>
			</script>

Open in new window


I know nothing about canvas but I know a lot about CF and a fair amount about JS.  Hope this at least points you in a good direction.
Avatar of cj_ervin
cj_ervin

ASKER

Thank you reiters, but I did try something similar to that end of last week. But I tried it again and I still get blank boxes where the graphics should be. Here is the code I used.

<script>
					function draw_canvas(vLoopNumber) {
					alert(vLoopNumber);
					var roof_layer_display_context=document.getElementById(eval("roof_layer_display_" + vLoopNumber)).getContext('2d'); 
				
					var roof_layer = new Image();
					var roof_layer2 = new Image();
					var roof_layer3 = new Image();
					roof_layer.src = 'Images/Layers/Gray.png'; // Path to image you want to use as a background
					roof_layer2.src = 'Images/Layers/Brown.png'; // Path to image you want to use as a background
					roof_layer3.src = 'Images/Layers/Green.png'; // Path to image you want to use as a background
				
					roof_layer_display_context.fillStyle = '##FFF';
					roof_layer_display_context.font = 'bold 16px sans-serif';
					
					roof_layer_display_context.drawImage(roof_layer, 20, 5);
					roof_layer_display_context.fillText('Hello world!', 135, 25);
					roof_layer_display_context.drawImage(roof_layer2, 20, 33);
					roof_layer_display_contex.fillText('Hello world!', 135, 53);
					roof_layer_display_context.drawImage(roof_layer3, 20, 61);
					roof_layer_display_context.fillText('Hello world!', 135, 81);

					alert("Inside Canvas");
				}

				<cfloop index="i" from="1" to="#vNumberOfAreas#">
					alert("test");
					draw_canvas(<cfoutput>#i#</cfoutput>);		
				</cfloop>
			</script>		
		
<cfloop index="i" from="1" to="#vNumberOfAreas#">
		
			<div id="divspacer">&nbsp;</div>
			
			<cfset vStartLayer = 5>
			<cfset vStartTextLayer = 25>							
		
			<cfset vLayerDisplayHeight = vDisplayLayers * 30>
					<div><canvas id="roof_layer_display_#i#" width="353" height="#vLayerDisplayHeight#" style="border:solid 1px ##000000;"></canvas></div>
				<div>
					<font size="2">Test - #i#</font>
				</div>
			</div>						
		</cfloop>		
		
	</cfoutput>

Open in new window


And I also tried this to no avail

		<cfset vNumberOfAreas = 3>
		<cfset vDisplayLayers = 5>
		
		<cfloop index="i" from="1" to="#vNumberOfAreas#">
			<cfset vLoopNumber = i>
			<script>
				function draw_canvas_#vLoopNumber#(vLoopNumber) {
					alert(vLoopNumber);
					var roof_layer_display_context_#vLoopNumber#=document.getElementById("roof_layer_display_#vLoopNumber#").getContext('2d');  
								

					var roof_layer_#vLoopNumber# = new Image();
					var roof_layer2_#vLoopNumber# = new Image();
					var roof_layer3_#vLoopNumber# = new Image();
					roof_layer_#vLoopNumber#.src = 'Images/Layers/Gray.png';
					roof_layer2_#vLoopNumber#.src = 'Images/Layers/Brown.png';
					roof_layer3_#vLoopNumber#.src = 'Images/Layers/Green.png';
				
					roof_layer_display_context_#vLoopNumber#.fillStyle = '##FFF';
					roof_layer_display_context_#vLoopNumber#.font = 'bold 16px sans-serif';
					
					
					roof_layer_display_context_#vLoopNumber#.drawImage(roof_layer_#vLoopNumber#, 20, 5);
					roof_layer_display_context_#vLoopNumber#.fillText('Hello world!', 135, 25);
					roof_layer_display_context_#vLoopNumber#.drawImage(roof_layer2_#vLoopNumber#, 20, 33);
					roof_layer_display_context_#vLoopNumber#.fillText('Hello world!', 135, 53);
					roof_layer_display_context_#vLoopNumber#.drawImage(roof_layer3_#vLoopNumber#, 20, 61);
					roof_layer_display_context_#vLoopNumber#.fillText('Hello world!', 135, 81);
				}
				alert("test");
				draw_canvas_<cfoutput>#i#</cfoutput>(<cfoutput>#i#</cfoutput>);		
			</script>	
			
			<div id="divspacer">&nbsp;</div>
			
			<cfset vStartLayer = 5>
			<cfset vStartTextLayer = 25>							
		
			<cfset vLayerDisplayHeight = vDisplayLayers * 30>
					<div><canvas id="roof_layer_display_#i#" width="353" height="#vLayerDisplayHeight#" style="border:solid 1px ##000000;"></canvas></div>
				<div>
					<font size="2">Test - #i#</font>
				</div>
			</div>			
		</cfloop>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of reiters
reiters
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Thank you very much for your help. It is working good now. So Thanks you Very Much!
Nice to hear.  Glad I could help.