Another html5 canvas text rendering

Published on May 17 2015 by Yousfi Benameur

This is another formatting text with html5 canvas .i introduced 3 methods to render the text as you can see in some screenshots below:

-a random color

-a gradient with 7 random colors.

-A pattern (any local picture for ex.)

can generate great quantity of various rendered texts with these three tools by interacing on the sliders.

can save or print the canvas (saved as image with usefull canvas method .toDataURL()).

All is build by automation in an internet explorer application.Javascript stays as it to make the code working with html5 canvas.

Select the code ,CTRL+C to copy and paste into a prg and run.(the code copied is rendered with blank inter-lines but that dont alter the final result).

Please correct a small bug due to the richtext editor(see below the line to correct).

Press F11 to make fullscreen window mode (F11 to return initial mode)-can install directly the fullscreen in code (apie.fullscreen=1....ALT+F4 to close)-Can also use the fullscreen web API (https://msdn.microsoft.com/en-us/library/dn265028%28v=vs.85%29.aspx see previous posts how to use it)

All is tested on Windows8.1 only

* Rendering texts in Html5 canvas
*Begin code

Local xo

m.xo=Int(Val(Inputbox("Roof text with color(1)-gradients(2)-pattern(3)","HTML5 canvas","2")))

If Empty(m.xo) Or ! Inlist(m.xo,1,3)

m.xo=2

Endi

 

Local m.xx

Do Case

Case m.xo=1

m.xx=[octx.fillStyle ='#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);]

 

Case m.xo=2

TEXT to m.xx noshow

var grad = ctx.createLinearGradient(0,0,os.width,0);

grad.addColorStop(0, '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6));

grad.addColorStop(.3, '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6));

grad.addColorStop(.5, '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6));

grad.addColorStop(.7, '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6));

grad.addColorStop(1, '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6));

octx.fillStyle = grad;

ENDTEXT

 

Case m.xo=3

Local xpict

m.xpict="file:///"+Strtran(Getpict(),"\","/")

TEXT to m.xx textmerge noshow

var img=document.createElement('img');

img.src="<<  m.xpict  >>"  ;

var pat=octx.createPattern(img,'repeat');

octx.fillStyle=pat;

ENDTEXT

Endcase

 

 

Set Safe Off

Declare Integer Sleep In kernel32 Integer

Declare Integer BringWindowToTop In user32 Integer

Declare Integer SetWindowText In user32 Integer,String

 

Local m.lcdest

m.lcdest=Addbs(Sys(2023))+"yroof.html"

 

Local apie

apie=Newobject("internetexplorer.application")

With apie

.Navigate("about:blank")

Sleep(500)

.silent=.T.

Endwith

 

 

Local m.myvar

TEXT to m.myvar textmerge noshow

<style>

xdiv {

line-height:60%;

}

span {

display:inline-block;

width:70px;

text-align:right;

font:12px sans-serif;

}

</style>

<center>

<br>

 

<canvas id='demo' width=800 height=400 style="background-color:black;"></canvas>

<div class="xdiv">

<br> <span>Curve:</span><input id="iCurve" type="range" min=0 max=200 value=110><span id="vCurve">110</span>

<br><span>OffsetY:</span><input id="iOffset" type="range" min=0 max=100 value=4><span id="vOffset">0</span>

<br><span>Text height:</span><input id="iHeight" type="range" min=0 max=200 value=64><span id="vHeight">64</span>

<br><span>Bottom:</span><input id="iBottom" type="range" min=0 max=200 value=200><span id="vBottom">200</span>

<br><span>Triangle:</span> <input id="iTriangle" type="checkbox">

<span>Text:</span><input id="iText" type="text" style="width:250; color:red;" value="VISUAL FOXPRO ROCK!">&nbsp &nbsp &nbsp

<input type="button" id="yb" value="Change color/Grad." style='color:red;background-color:lime;cursor:pointer;' onclick="renderBridgeText();">

<input type="button" id="ysave" value="Save" style='color:red;background-color:cyan;cursor:pointer;' onclick="ysave();">

</center>

</div>

<script>

/// (c) Ken Fyrstenberg Nilsen, Abidas Software .com

/// License: CC-Attribute

//http://stackoverflow.com/questions/19544735/how-to-make-rooftext-effect-and-valley-text-effect-in-html5-or-fabric-js      -----  for a part only.

var ctx = demo.getContext('2d'),

fillStyle='black',

font = '64px impact',

w = demo.width,

h = demo.height,

curve,

offsetY,

bottom,

textHeight,

isTri = false,

dltY,

angleSteps = 180 / w,

i = w,

y,

os = document.createElement('canvas'),

octx = os.getContext('2d');

 

os.width = w;

os.height = h;

 

octx.font = font;

octx.textBaseline = 'top';

octx.textAlign = 'center';

 

octx.fillStyle="black";

 

 

function renderBridgeText() {

curve = parseInt(iCurve.value, 10);

offsetY = parseInt(iOffset.value, 10);

textHeight = parseInt(iHeight.value, 10);

bottom = parseInt(iBottom.value, 10);

isTri = iTriangle.checked;

 

vCurve.innerHTML = curve;

vOffset.innerHTML = offsetY;

vHeight.innerHTML = textHeight;

vBottom.innerHTML = bottom;

 

 

 

octx.clearRect(0, 0, w, h);

 

ctx.clearRect(0, 0, w, h);

ctx.fillRect(0, 0, w, h);

/////////

<<m.xx>>

/////////

octx.fillText(iText.value.toUpperCase(), w * 0.5, 0);

 

/// slide and dice

i = w;

dltY = curve / textHeight;

y = 0;

while (i--) {

if (isTri) {

y += dltY;

if (i === (w * 0.5)|0) dltY = -dltY;

} else {

y = bottom - curve * Math.sin(i * angleSteps * Math.PI / 180);

}

ctx.drawImage(os, i, 0, 1, textHeight,

i, h * 0.5 - offsetY / textHeight * y, 1, y);

}

}

 

iCurve.onchange = iOffset.onchange = iHeight.onchange = iBottom.onchange = iText.onkeyup = iTriangle.onchange = renderBridgeText;

renderBridgeText();

 

 

function ysave(){

var canvas=document.getElementById("demo");

var win=window.open();

win.document.write("<h2  style = 'background-color:yellow;color:maroon;width:650px;'>Right click menu to safe or print image</h2><br><img src=' "+canvas.toDataURL()+"' />");

}

</script>

ENDTEXT

Local m.oo

m.oo=apie.Document

Strtofile(m.myvar,m.lcdest)

apie.Navigate(m.lcdest)

Sleep(500)

oo.body.bgcolor=[bisque]

With apie

.menubar=0

.Toolbar=0

.StatusBar=0

.Width=950

.Height=750

.Left=(Sysmetric(1)-.Width)/2

.Top=5

BringWindowToTop(.HWnd)

SetWindowText(.HWnd," Text formatted as roofs")

.Visible=.T.

Endwith

 

Retu

*End code

Sliders are not well rendered in IE11 as you see in Firefox.

Sliders are not well rendered in IE11 as you see in Firefox.

The better way to render 3D texts is with CSS: Read (code *14*)-

http://yousfi.over-blog.com/working-with-fonts.html

Please correct this bug due yet to the provider editor

<h2= 'background-color   ......     <h2 style='background-color