Texts worshop on html5 canvas

Published on by Yousfi Benameur

The html5 canvas have great capabilities to work with any texts  even unicodes.

this code shows how to  draw any text with

 -controling the fontname, fonstsize and fontstyle.note that are not yet one font string implemented in javascript code and are not yet working as separable properties. (font,size,style)

 -controling shadows(depth,color,offset,blur)

-controling the canvas backcolor and drawing a background backcolor saved with the contents as PNG.(note that the canvas background color is not saved when you export canvas to image).

-Introducing any text and controling its direction (left to right or right to left).Text can be unicode.

the textarea is a wonderfull web control having unicode support.Can copy ,paste any unicode text here (even supporting a big text).

use the standard keys  as :CTRL+C (copy) CTRL+X (erase)-CTR+V (paste)-CTRL+A (select all)

-Can adjust the canvas width and height dynamically.

-Can adjust the 5 colors gradients to beautify the text.

-Can adjust the canvas to fit the form and show/hide the textarea.

-Can view the complet  web code as a txt file.(infortunatly the unicode text is rendered  here as ??? chars.)

-to cut the shadow simply make its context color==background color.(Can also be done in javascript code).

-I presented in the code yet another mehod to save the canvas as a png image.

 

Warning: the button clear document clear all objects contained in.Must restart the application to rebuild it.

 

Javascript language is unable to make some operations (certainly for security considerations ) mainly in local disk.(for ex.importing  any txt file contents to the textarea: the code works on web but fails on local). I avoided this solution.

Of course all these is possible only with the vfp ie browser emulated (mine as IE11).

can see this article : http://yousfi.over-blog.com/2015/01/who-said-that-vfp-ie-browser-died.html

 

-The code is shipped in the zip below  as a prg and as a visual form in the download link below.

See some screenShots picked from the running application.

 

All is tested on Windows8.1 only.

Can choose a short text and increase the fontsize up to 72 to see more effect like 3D text.Choose various 3D font is better.

Can choose a short text and increase the fontsize up to 72 to see more effect like 3D text.Choose various 3D font is better.

Texts worshop on html5 canvas
Texts worshop on html5 canvas
Texts worshop on html5 canvas
Texts worshop on html5 canvas
Texts worshop on html5 canvas
Texts worshop on html5 canvas
Texts worshop on html5 canvas
Texts worshop on html5 canvas
Texts worshop on html5 canvas
Texts worshop on html5 canvas
Texts worshop on html5 canvas
Texts worshop on html5 canvas
Texts worshop on html5 canvas
Texts worshop on html5 canvas
Texts worshop on html5 canvas

VFP, DOM and Html5 canvas

it seems that my questions about using DOM to make vfp working on html5 canvas are yet unanswered.
It seems also that Javascript is the first language working with html5 canvas.there is some wraps as in java.
my expectations are still relevant and do not find a way out.Meanwhile I continue to use javascript code

To be informed of the latest articles, subscribe:
Comment on this post