{"id":35361,"date":"2018-01-06T03:01:42","date_gmt":"2018-01-05T17:01:42","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=35361"},"modified":"2018-01-06T08:56:36","modified_gmt":"2018-01-05T22:56:36","slug":"textarea-pointing-local-font-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/textarea-pointing-local-font-tutorial\/","title":{"rendered":"Textarea Pointing Local Font Tutorial"},"content":{"rendered":"
\"Textarea<\/a>

Textarea Pointing Local Font Tutorial<\/p><\/div>\n

A large part of the design of a web application relates to the agreed message formats. Yesterday’s Textarea Pointing Rasterise Tutorial<\/a> started us down the road of a new message format whose delimitation highlights goes like an encodeURIComponent<\/a>() version of …<\/p>\n


\n{header}:[{startIntegerCoord}.{Red3Digits}{Green3Digits}{Blue3Digits}{Another3Digits}[,{nonStartIntegerCoords}*][;{startIntegerCoord}.{Red3Digits}{Green3Digits}{Blue3Digits}{Another3Digits}[,{nonStartIntegerCoords}*]*]*]
\n<\/code><\/p>\n

… where in general terms “,” is “pen down” and “;” is “pen up” (and “:” separates a {header} from “the rest”), and in yesterday’s thoughts …<\/p>\n


\n{header} consists of {dataLength}.{numberOfPixelsInOneRowWidth}
\n<\/code><\/p>\n

… and because of this, these message types stand alone (important when designing a message format) in that any one {startIntegerCoord} or any of {nonStartIntegerCoords} could get an (x,y) co-ordinate set be defined via (for the case of {startIntegerCoord}) …<\/p>\n


\nx = ({startIntegerCoord} % {numberOfPixelsInOneRowWidth})
\ny = (({startIntegerCoord} - x) \/ {numberOfPixelsInOneRowWidth})
\n<\/code><\/p>\n

But we’ve digressed a little from today’s “Textarea Pointing Local Font Tutorial” topic haven’t we? Well, not entirely, because the messages used to define our “local fonts” (yes, we are setting about a system of defining fonts local to other web applications on the same domain using [canvasContext].strokeText() or [canvasContext].fillText() (if we are interested), the storage means being as a few tutorials ago …<\/p>\n

\n