FiveTech Software tech support forums

by **Antonio Linares** » Sat Dec 24, 2011 11:33 pm

canvas.html

Code: Select all Expand view: <html> <script> function init() { alert( "init" ); } window.onload = init; </script> <head> </head> <body> <h1>HTML5 canvas management</h1> </body> </html>

by **Antonio Linares** » Sat Dec 24, 2011 11:35 pm

Code: Select all Expand view: <html> <script> function init() { alert( "init" ); } window.onload = init; </script> <head> </head> <body> <h1>HTML5 canvas management</h1> <canvas id="canvas" width="800" height="500" style="background-color:#000"></canvas> </body> </html>

by **Antonio Linares** » Sat Dec 24, 2011 11:42 pm

canvas.html

Code: Select all Expand view: <html> <script> var ctx; // context function init() { var canvas = document.getElementById( 'canvas' ); ctx = canvas.getContext( '2d' ); alert( "init" ); } window.onload = init; </script> <head> </head> <body> <h1>HTML5 canvas management</h1> <canvas id="canvas" width="800" height="500" style="background-color:#000"></canvas> </body> </html>

by **Antonio Linares** » Sun Dec 25, 2011 10:19 am

Building a console to use from the WebSockets server :-)

Code: Select all Expand view: <html> <script> var ctx; // context var row, col; // say coordinates function Say( cText ) { ctx.fillText( cText, col, row ); row += 20; } function init() { var canvas = document.getElementById( 'canvas' ); ctx = canvas.getContext( '2d' ); ctx.fillStyle = '#0f0'; ctx.font = '20px verdana'; ctx.textBaseline = 'top'; row = 0; col = 0; Say( "Initializing..." ); Say( "ready" ); } window.onload = init; </script> <head> </head> <body> <h1>HTML5 canvas management</h1> <canvas id="canvas" width="800" height="500" style="background-color:#000"></canvas> </body> </html>

by **Antonio Linares** » Sun Dec 25, 2011 10:27 am

Code: Select all Expand view: <html> <script> var ctx; // context var row, col; // say coordinates function Say( cText ) { ctx.fillText( cText, col, row ); row += 22; } function init() { var canvas = document.getElementById( 'canvas' ); ctx = canvas.getContext( '2d' ); ctx.fillStyle = '#0f0'; ctx.font = '20px verdana'; ctx.textBaseline = 'top'; row = 0; col = 0; Say( "Initializing..." ); Say( new Date() ); Say( "ready" ); } window.onload = init; </script> <head> </head> <body> <h1>HTML5 canvas management</h1> <canvas id="canvas" width="800" height="500" style="background-color:#000"></canvas> </body> </html>

by **Antonio Linares** » Sun Dec 25, 2011 10:48 am

Code: Select all Expand view: <html> <script> var ctx; // context var row, col; // say coordinates function Say( cText ) { ctx.fillText( cText, col, row ); row += 22; } function init() { var canvas = document.getElementById( 'canvas' ); ctx = canvas.getContext( '2d' ); ctx.fillStyle = '#0f0'; ctx.font = '20px verdana'; ctx.textBaseline = 'top'; row = 0; col = 0; Say( "Initializing..." ); Say( new Date() ); Say( "ready" ); } window.onload = init; </script> <head> </head> <body> <h1>HTML5 canvas console implementation</h1> <div style="width: 820px; height: 500px; overflow: auto;"> <canvas id="canvas" width="800" height="570" style="background-color:#000"></canvas> </div> <br> Command: <input type="text" name="command" style="width:750px; background-color:#000; color:#0f0; font-size: 20px;"> </body> </html>

by **Antonio Linares** » Sun Dec 25, 2011 10:59 am

User input working, next step: server connection :-)

Code: Select all Expand view: <html> <script> var ctx; // context var row, col; // say coordinates function Say( cText ) { ctx.fillText( cText, col, row ); row += 22; } function init() { var canvas = document.getElementById( 'canvas' ); ctx = canvas.getContext( '2d' ); ctx.fillStyle = '#0f0'; ctx.font = '20px verdana'; ctx.textBaseline = 'top'; row = 0; col = 0; Say( "Initializing..." ); Say( new Date() ); Say( "ready" ); } function ProcessCommand( event ) { if( event.keyCode == 13 ) { var edit = document.getElementById( "command" ); Say( edit.value ); edit.value = ""; } } window.onload = init; </script> <head> </head> <body> <h1>HTML5 canvas console implementation</h1> <div style="width: 820px; height: 500px; overflow: auto;"> <canvas id="canvas" width="800" height="570" style="background-color:#000"></canvas> </div> <br> <b>Command:</b> <input id="command" type="text" name="command" style="width:750px; background-color:#000; color:#0f0; font-size: 20px;" onkeypress="ProcessCommand( event )"> </body> </html>

by **ADutheil** » Sun Dec 25, 2011 11:44 am

Antonio,

For me it´s working OK with chrome + XP but not with IE9 + W7. Is this expected?

by **Antonio Linares** » Sun Dec 25, 2011 12:02 pm

André,

As far as I know IE9 does not fully support HTML5 WebSockets, so for now Chrome is the navigator to use for this development :-)

HTML5 canvas management