{"id":35305,"date":"2018-01-03T03:01:50","date_gmt":"2018-01-02T17:01:50","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=35305"},"modified":"2018-01-03T18:52:44","modified_gmt":"2018-01-03T08:52:44","slug":"textarea-pointing-canvas-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/textarea-pointing-canvas-tutorial\/","title":{"rendered":"Textarea Pointing Canvas Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Textarea Pointing Canvas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing_email_pdf_canvas.jpg\" title=\"Textarea Pointing Canvas Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Textarea Pointing Canvas Tutorial<\/p><\/div>\n<p>With our blog posting thread last left off with yesterday&#8217;s <a title='Textarea Pointing PDF Tutorial' href='#tppdft'>Textarea Pointing PDF Tutorial<\/a>, I know we&#8217;ve been holding out on involving &#8230;<\/p>\n<ul>\n<li>graphical data forms<\/li>\n<li><a target=_blank title='HTML img element information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_img.asp'>image<\/a> data<\/li>\n<li>HTML5 <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element<\/li>\n<li><a target=_blank title='Data URL (or Data URI) information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>data URI<\/a><\/li>\n<\/ul>\n<p> &#8230; not for &#8220;nga, nga, nga nga, nga&#8221; reasons, but because we want to show that the starting out with &#8220;textarea character data&#8221; sets is a useful layer of information that can sit on top and easily pass onto these (last two above in particular) functionalities above in optional reporting modes of use, but still keep that &#8220;textual context&#8221; in place as well.  Win, win, we&#8217;d say.<\/p>\n<p>However, on non-mobile web browsers in particular, you&#8217;ve got to appreciate how the modern browsers interface to <i>canvas<\/i> elements and <i>image<\/i> data (which can be derived from that <i>canvas<\/i> element by the oft mentioned [canvasElement].<a target=_blank title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL'>toDataURL<\/a>() method) with a myriad of right click (Windows or two finger gesture on Mac OS X) options, our favourites of which are &#8230;<\/p>\n<ul>\n<li>image &#8211; Open Image in New Tab (or Window)<\/li>\n<li>image &#8211; Save Image to Desktop<\/li>\n<li>image &#8211; Save Image As&#8230;<\/li>\n<li>image &#8211; Copy Image<\/li>\n<li>image &#8211; Share Mail (to client email (ie. your own email address is &#8220;From&#8221; email address) as image attachment)<\/li>\n<li>image &#8211; Share Message<\/li>\n<li>canvas &#8211; Save Page as Web Archive<\/li>\n<li>canvas &#8211; Print Page&#8230; Open PDF in PDF Reader<\/li>\n<li>canvas &#8211; Print Page&#8230; Save As PDF<\/li>\n<li>canvas &#8211; Print Page&#8230; Save As PostScript<\/li>\n<li>canvas &#8211; Print Page&#8230; Mail PDF (to client email (ie. your own email address is &#8220;From&#8221; email address) with a PDF attachment)<\/li>\n<\/ul>\n<p> &#8230; so much so that we just want all this clientside (no PHP serverside &#8220;anything&#8221; today) to wash over you with your mind &#8220;swimming&#8221; with possibilities, perhaps?!<\/p>\n<p>Take a look at today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.htm\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.html---GETME\" title=\"textarea_pointing.htm\">textarea_pointing.htm<\/a> HTML and Javascript (DOM) and CSS code changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.html---GETME\" title=\"textarea_pointing.htm\">this way<\/a> as all that needed to change to involve canvas and image data and data URIs in our Textarea Pointing project.<\/p>\n<p>If there is no serverside &#8220;anything&#8221; going on, what is the &#8220;glue&#8221; that holds all this clientside interfacing together?  These days, more and more, it is the use of <a target=_blank title='Data URL (or Data URI) information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>data URI<\/a> portable data that can be used in, just with today&#8217;s work &#8230;<\/p>\n<ul>\n<li>HTML img element src attribute<\/li>\n<li>HTML img element style attribute background URL(data URI)<\/li>\n<\/ul>\n<p>This is all great, but that&#8217;s it, unless you want to run that image data back through an intelligent scanning process to try to regain the &#8220;character data&#8221;?  Some scanners do this, but do you really think you are going to continue getting a good result that way forever?  We say, hang on to data in rawer forms and resolutions until the very last minute, and only go to these very well programmed for &#8220;graphical&#8221; forms (of final reporting) for your final reporting, or if you know that only that &#8220;blobby&#8221; &#8220;graphical&#8221; form is all that&#8217;s required anyway.   If so, think about using HTML canvas from the start.  It&#8217;s data capture capabilities, as we at this blog <a target=_blank title='Canvas bog posts at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas'>have been at pains<\/a> to point out for a long time now, are also excellent.<\/p>\n<p>Another Paul Kelly song <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=6_ndC07C2qw'>seems apt<\/a>!<\/p>\n<hr>\n<p id='tppdft'>Previous relevant <a target=_blank title='Textarea Pointing PDF Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/textarea-pointing-pdf-tutorial\/'>Textarea Pointing PDF Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Textarea Pointing PDF Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing_email_pdf.jpg\" title=\"Textarea Pointing PDF Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Textarea Pointing PDF Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Textarea Pointing Email Tutorial' href='#tpet'>Textarea Pointing Email Tutorial<\/a> was a start to our &#8220;sharing&#8221; functionality &#8220;push&#8221; with our new Textarea Pointing project.  That work involved &#8230;<\/p>\n<ul>\n<li>(new window) with menu<\/li>\n<li>(new window) without menu<\/li>\n<li>email with HTML attachment &#8230; and today we add to that &#8230;<\/li>\n<li><b>email with <a target=_blank title='Portable document format (PDF) information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Portable_Document_Format'>PDF<\/a> attachment &#8230; as well as &#8230;<\/b><\/li>\n<li><b>PDF download to client device<\/b><\/li>\n<li><b>PDF display via default client PDF viewer<\/b><\/li>\n<\/ul>\n<p> &#8230; that required, again, <a target=_blank title='Linux diff PDF Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/linux-diff-pdf-tutorial\/'>Linux diff PDF Tutorial<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php---GETME\">prediff.php<\/a> PHP code integration <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php---GETME\">in this changed way<\/a>.  This time, though, rather than <i>$outputpdf-&gt;Cell($x, $y, $line_of_text);<\/i> being the best <a target=_blank title='Fpdf PHP class' href='http:\/\/www.fpdf.org\/'>Fpdf<\/a> means of displaying of the PDF text, we found &#8230;<\/p>\n<p><code><br \/>\n$outputpdf-&gt;Text($x, $y, $line_of_text);<br \/>\n<\/code><\/p>\n<p> &#8230; to be more applicable to programming like for the way vinyl records work with their stylus, in other words, at a given &#8230;<\/p>\n<ul>\n<li><font size=1>HTML textarea element (x,y)<\/font> <b>position<\/b> &#8230; we gather &#8230;<\/li>\n<li><font size=1>HTML textarea element<\/font> <b>font information<\/b> <font size=1>stored in the <i>alt<\/i> attribute<\/font> &#8230; to place text &#8230;<\/li>\n<li><font size=1>to be able to<\/font> &#8230;<br \/>\n<b>$outputpdf-&gt;SetFont($fontFamily, $fontStyle, $fontSize);<br \/>\n$outputpdf-&gt;SetTextColor($fontColR, $fontColG, $fontColB);<br \/>\n$outputpdf-&gt;Text($x, $y, $line_of_text);<\/b>\n<\/li>\n<\/ul>\n<p> &#8230; as the &#8220;work of the code&#8221; needed to transition from our &#8220;user capture with character data&#8221; (in the &#8220;textarea&#8221;s) to a graphical system (or <a target=_blank title='Widget information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Software_widget'>&#8220;widget&#8221;<\/a>, you might like to think of this as).  It just so happens that the first (graphical) &#8220;widget&#8221; design of interest is the creation of PDF, as it is a good conduit between &#8220;character data&#8221; and a &#8220;graphical look&#8221;.  A &#8220;widget&#8221; feeling thing being what it is though, expect more integrations to come, as time goes on!<\/p>\n<p>Today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.htm\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.html--GETME\" title=\"textarea_pointing.htm\">textarea_pointing.htm<\/a> code changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.html--GETME\" title=\"textarea_pointing.htm\">this way<\/a>.<\/p>\n<hr>\n<p id='tpet'>Previous relevant <a target=_blank title='Textarea Pointing Email Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/textarea-pointing-email-tutorial\/'>Textarea Pointing Email Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Textarea Pointing Email Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/textarea_pointing_email.jpg\" title=\"Textarea Pointing Email Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Textarea Pointing Email Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Textarea Pointing Primer Tutorial' href='#tppt'>Textarea Pointing Primer Tutorial<\/a> was a little too localised in its application in our books.  Not if a web application is not of generic use, but this one could be of generic use, in our <strike>pamphlettes<\/strike> books.<\/p>\n<p>Our favourite &#8220;sharing&#8221; idea is email, by far, as today, as far as that goes, we are going to offer email &#8220;services&#8221; via a <a target=_blank title='Client pre-emptive iframe' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=pre-emptive'>&#8220;client pre-emptive iframe&#8221;<\/a> determination of whether where you have placed today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.htm\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.html-GETME\" title=\"textarea_pointing.htm\">textarea_pointing.htm<\/a> code (changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.html-GETME\" title=\"textarea_pointing.htm\">this way<\/a>) has, relative to it, an existant <i>..\/PHP\/Geographicals\/prediff.php<\/i> PHP code source (that we left to go on our Textarea Pointing project) of <a target=_blank title='Linux diff PDF Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/linux-diff-pdf-tutorial\/'>Linux diff PDF Tutorial<\/a> (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php--GETME\">prediff.php<\/a> PHP code&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php--GETME\">last changes<\/a> were used to cater for the Textarea Pointing HTML email attachment requirement).<\/p>\n<p>We like to use a &#8220;client pre-emptive iframe&#8221; technique initial check for whether the HTML finds <i>prediff.php<\/i> because the email functionality is optional after all.  If <i>prediff.php<\/i> is not found, then the Email button is never shown, simple as that.  But the other two displays of the HTML in new popup windows &#8230;<\/p>\n<ul>\n<li>with menu<\/li>\n<li>without menu &#8230; as well as &#8230;<\/li>\n<li>email with HTML attachment<\/li>\n<\/ul>\n<p> &#8230; complete the scope of the new &#8220;Sharing&#8221; functionalities today, and this year, on this!<\/p>\n<p>So &#8230; <font size=9>Happy New Year!<\/font><\/p>\n<hr>\n<p id='tppt'>Previous relevant <a target=_blank title='Textarea Pointing Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/textarea-pointing-primer-tutorial\/'>Textarea Pointing Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Textarea Pointing Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/textarea_pointing.jpg\" title=\"Textarea Pointing Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Textarea Pointing Primer Tutorial<\/p><\/div>\n<p>Completely new idea today, so hoping this does not put some of you &#8220;episodic&#8221; users off.  <font size=1>We&#8217;ll get back to incomplete recent &#8220;threads&#8221; at a later date.<\/font>  This is because we had pause for thought, due to yesterday&#8217;s <a target=_blank title='Linux diff PDF Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/linux-diff-pdf-tutorial\/'>PDF textual data positioning work<\/a>, regarding <b>one<\/b> of our favourite HTML fundamental element types of interest (that we are always comparing) &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a><\/li>\n<li><a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'><b>textarea<\/b><\/a><\/li>\n<\/ul>\n<p>To quote <a target=_blank title='HTML Textarea and Div Talents Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-textarea-and-div-talents-primer-tutorial\/'>HTML Textarea and Div Talents Primer Tutorial<\/a> (as it was addressing the <b>textarea<\/b> HTML element) &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-textarea-and-div-talents-primer-tutorial\/'>\n<p>It&#8217;s crucial for getting HTML or non-caretted Text (that is internally turned into HTML behind the scenes) &#8230; via those <a target=_blank title='Excel Online Spreadsheet Monthly Planner Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/excel-online-spreadsheet-monthly-planner-primer-tutorial\/'>wonderful<\/a> <a target=_blank title='Tab navigation button or panel information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Tab_(GUI)'>tabs<\/a> &#8230; off the user and onto the MySql database, and then out to the client user as part of a webpage.  Out at that webpage, though, we&#8217;ve no doubt this content is embedded in an HTML <a target=_blank title='HTML div tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a> element, the other &#8220;talent&#8221; here.<\/p>\n<p><\/p>\n<p>But their strengths and weaknesses go like this, at least to us, in the limited HTML text view of things &#8230;<\/p>\n<p><\/p>\n<table border=\"100\">\n<tbody>\n<tr>\n<th>Text Functionality Issue<\/th>\n<th>HTML Element Type<\/th>\n<th>Strength<\/th>\n<th>Weakness (where a \u201cYes\u201d is like \u2026 \u201cOh No!\u201d)\n<\/th>\n<\/tr>\n<tr>\n<td rowspan=\"2\">Display Monocolour Text<\/td>\n<td>Textarea\n<\/td>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Div\n<\/td>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">Display Editable Text<\/td>\n<td>Textarea\n<\/td>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Div\n<\/td>\n<td><\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<\/tr>\n<tr>\n<td rowspan=\"2\">Display Multicolour Text<\/td>\n<td>Textarea\n<\/td>\n<td><\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>Div\n<\/td>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/blockquote>\n<p>Nothing there above gives much encouragement about the HTML <b>textarea<\/b>&#8216;s &#8220;positioning&#8221; talents.  But what if we were to create a <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=-kbTbg00AJU'>&#8220;posse&#8221;<\/a>, or perhaps a <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=zgywD3XJaWU'>&#8220;phalanx&#8221;<\/a>, of <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=wIrHAa0WljQ'>&#8220;textarea&#8221;<\/a>s to bank up with &#8220;bits and pieces&#8221; of the positioning <i>&#8220;issue&#8221;<\/i> (under the auspices of an HTML <a target=_blank title='HTML form information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_form.asp'>form<\/a> element, for later accountability)?<\/p>\n<p>What do we mean by <i>&#8220;issue&#8221;<\/i> here?  Well, something like a letter, as with the end product of a scanning process involving a hardcopy letter, is that much more useful if what we end up with is the &#8220;characters&#8221; that go to make up that letter (or report, or essay), not some graphic (or totally visual) encapsulation of it, which can be what happens when you involve as your HTML &#8220;capture&#8221; element the <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>&#8220;canvas&#8221;<\/a> element.  No, we want that &#8220;posse&#8221; of &#8220;textarea&#8221;s be that &#8220;character&#8221; source, which later, we can present as an overall graphic at a later date, for sharing purposes for instance, and maintain the &#8220;letter&#8221; (or report or essay) data continuously as the user edits.<\/p>\n<p>How to do?  We click\/touch with a base &#8220;textarea&#8221; and that is enough to arrange for an <a target=_blank title='Overlay blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> &#8220;textarea&#8221; (via CSS <a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> and <a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a> properties, some <a target=_blank title='CSS3 background-color information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_background-color.asp'>background-color:transparent<\/a> styling, along with <i>div id=dscript<\/i> (innerHTML) appended dynamic CSS styling making use of CSS <a target=_blank title='CSS3 calc information' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html'>calc<\/a>&#8216;ing <i>&lt;style&gt; .mboard2 { width: calc(85% &#8211; 56px); } &lt;\/style&gt;<\/i> type syntax (where the <i>56px<\/i> would have been derived via the onclick event logic, the <i>85%<\/i> is to allow for a 15% width menu at the right, and the <i>2<\/i> in <i>mboard2<\/i> refers to the second <i>textarea<\/i> in question)) to follow (ironically an HTML div element is by far the best &#8220;container&#8221; in a (Javascript DOM controlled) <a target=_blank title='Linked list information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Linked_list'>linked list<\/a> fashion for this, rather than appending to the HTML form element&#8217;s innerHTML (which seems to wipe out previous textarea values)), like a linked list of &#8220;textarea&#8221;s.  Along the way we allow for font information to be collected and kept as well (for now, via the <i>textarea<\/i>&#8216;s <a target=_blank title='HTML alt attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_alt.asp'><i>alt<\/i><\/a> attribute), to add to the chances for variety with our overall &#8220;letter&#8221; (or report or essay) reporting end product.<\/p>\n<p>Which leaves us to talk about the &#8220;textarea pointing&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.html\" title=\"Click picture\">live run<\/a>&#8216;s underlying HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_pointing.html_GETME\" title=\"textarea_pointing.html\">textarea_pointing.html<\/a> code for your perusal.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d35213' onclick='var dv=document.getElementById(\"d35213\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/textarea\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35213' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d35258' onclick='var dv=document.getElementById(\"d35258\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35258' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d35275' onclick='var dv=document.getElementById(\"d35275\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pdf\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35275' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d35305' onclick='var dv=document.getElementById(\"d35305\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35305' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>With our blog posting thread last left off with yesterday&#8217;s Textarea Pointing PDF Tutorial, I know we&#8217;ve been holding out on involving &#8230; graphical data forms image data HTML5 canvas element data URI &#8230; not for &#8220;nga, nga, nga nga, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/textarea-pointing-canvas-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,1,37],"tags":[2432,184,211,1654,342,354,360,380,2339,400,452,2430,541,564,576,587,590,1525,652,2431,703,861,1861,894,913,967,997,1054,1262,1319,1418,1496],"class_list":["post-35305","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-uncategorised","category-tutorials","tag-alt","tag-canvas","tag-click","tag-data-uri","tag-div","tag-dom","tag-download","tag-email","tag-essay","tag-event","tag-form","tag-fpdf","tag-graphics","tag-hierarchy","tag-html","tag-iframe","tag-image","tag-innerhtml","tag-javascript","tag-letter","tag-linked-list","tag-onclick","tag-outerhtml","tag-overlay","tag-pdf","tag-popup","tag-programming","tag-report","tag-textarea","tag-tutorial","tag-webpage","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35305"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=35305"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35305\/revisions"}],"predecessor-version":[{"id":35332,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35305\/revisions\/35332"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=35305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=35305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=35305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}