FiveTech Support Forums

FiveWin / Harbour / xBase community
Board indexActive topicsAll discussionsLogin (GitHub)
Board index FiveWin for Harbour/xHarbour HTML5 canvas management
Antonio Linares
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
HTML5 canvas management
Posted: Sat Dec 24, 2011 11:33 PM
canvas.html

Code (fw): Select all Collapse
<html>

<script>
function init()
{
   alert( "init" );
}

window.onload = init;
</script>

<head>
</head>
<body>
<h1>HTML5 canvas management</h1>
</body>
</html>
regards, saludos

Antonio Linares
www.fivetechsoft.com
Antonio Linares
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
Re: HTML5 canvas management
Posted: Sat Dec 24, 2011 11:35 PM
Defining the canvas object

http://www.fivetechsoft.com/english/canvas.html

canvas.html
Code (fw): Select all Collapse
<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>
regards, saludos

Antonio Linares
www.fivetechsoft.com
Antonio Linares
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
Re: HTML5 canvas management
Posted: Sat Dec 24, 2011 11:42 PM
canvas.html

Code (fw): Select all Collapse
<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>
regards, saludos

Antonio Linares
www.fivetechsoft.com
Antonio Linares
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
Re: HTML5 canvas management
Posted: Sun Dec 25, 2011 10:19 AM
Building a console to use from the WebSockets server :-)

http://www.fivetechsoft.com/english/canvas.html

canvas.html
Code (fw): Select all Collapse
<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>
regards, saludos

Antonio Linares
www.fivetechsoft.com
Antonio Linares
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
Re: HTML5 canvas management
Posted: Sun Dec 25, 2011 10:27 AM
Showing date and time...

http://www.fivetechsoft.com/english/canvas.html

Code (fw): Select all Collapse
<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>
regards, saludos

Antonio Linares
www.fivetechsoft.com
Antonio Linares
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
Re: HTML5 canvas management
Posted: Sun Dec 25, 2011 10:48 AM
Preparing a user command input:

http://www.fivetechsoft.com/english/canvas.html

canvas.html
Code (fw): Select all Collapse
<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>
regards, saludos

Antonio Linares
www.fivetechsoft.com
Antonio Linares
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
Re: HTML5 canvas management
Posted: Sun Dec 25, 2011 10:59 AM
User input working, next step: server connection :-)

http://www.fivetechsoft.com/english/canvas.html

Code (fw): Select all Collapse
<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>
regards, saludos

Antonio Linares
www.fivetechsoft.com
ADutheil
Posts: 368
Joined: Sun May 31, 2009 06:25 PM
Re: HTML5 canvas management
Posted: 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?

Regards,



André Dutheil

FWH 13.04 + HB 3.2 + MSVS 10
Antonio Linares
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
Re: HTML5 canvas management
Posted: 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 :-)

regards, saludos

Antonio Linares
www.fivetechsoft.com

Continue the discussion

Static archive · New replies & topics via GitHub Discussions