{"id":18235,"date":"2016-10-13T18:47:42","date_gmt":"2016-10-13T18:47:42","guid":{"rendered":"http:\/\/www.oracletutoring.ca\/blog\/?p=18235"},"modified":"2018-07-10T14:46:11","modified_gmt":"2018-07-10T14:46:11","slug":"web-design-graphics-outlined-text-with-jsdraw2dx","status":"publish","type":"post","link":"https:\/\/www.oracletutoring.ca\/blog\/web-design-graphics-outlined-text-with-jsdraw2dx\/","title":{"rendered":"Web Design:  graphics:  Outlined Text with jsDraw2DX"},"content":{"rendered":"<h1>The tutor continues about the graphics library jsDraw2DX:  how to use it for outlined text.<\/h1>\n<div style=\"height:330px;width:300px;display:block;margin:auto\">\n<div id=\"grph\" style=\"position:relative;height:330px;width:300px;background-color:navy;border-style:solid;border-color:brown;border-width:2px\"><\/div>\n<p><script src=\"\/..\/jsDraw2DX\/jsDraw2DX.js\"><\/script><\/p>\n<p><script src=\"\/..\/jsDraw2DX_projects\/oct13_2016jsDraw.js\"><\/script>\n<\/div>\n<p><span style=\"white-space:pre-wrap\"><br \/><\/span><br \/>\nTo accomplish the effect above one might proceed something like this:<\/p>\n<div style=\"color:brown\">\n&#60;div id=&#8221;grph&#8221; style=&#8221;position:relative; height:330px;width:410px; background-color:navy; border-style:solid;border-color:brown; border-width:2px&#8221;&#62;&#60;\/div&#62;<br \/>\n&#60;script src=&#8221;dir_where_jsDraw2DX_resides\/jsDraw2DX.js&#8221;&#62;&#60;\/script&#62;<br \/>\n&#60;script&#62;<br \/>\nvar gr0=new jxGraphics(document.getElementById(&#8220;grph&#8221;));<\/p>\n<p>var pen0=new jxPen(new jxColor(&#8216;white&#8217;),&#8217;1px&#8217;);<br \/>\nvar brush0=new jxBrush(new jxColor(&#8216;brown&#8217;));<br \/>\nvar font0=new jxFont(&#8216;verdana&#8217;);<br \/>\nfont0.size=&#8221;50px&#8221;;<\/p>\n<p>var text0=new jxText(new jxPoint(75,88), &#8220;jsDraw2DX&#8221;, font0, pen0,brush0,12);<\/p>\n<p>var text1=new jxText(new jxPoint(35,188), &#8220;Outlined Text&#8221;, font0, pen0,brush0,12);<br \/>\ntext0.draw(gr0);<br \/>\ntext1.draw(gr0);<br \/>\n&#60;\/script&#62;\n<\/p><\/div>\n<p>To use jsDraw2DX, it needs to reside one your system.  From the <a href=\"http:\/\/jsdraw2dx.jsfiction.com\/\">jsDraw2DX website<\/a> it can be downloaded.<\/p>\n<p>HTH:)<\/p>\n<p>Jack of <a href=\"https:\/\/www.oracletutoring.ca\">Oracle Tutoring by Jack and Diane,<\/a> Campbell River, BC.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The tutor continues about the graphics library jsDraw2DX: how to use it for outlined text. To accomplish the effect above one might proceed something like this: &#60;div id=&#8221;grph&#8221; style=&#8221;position:relative; height:330px;width:410px; background-color:navy; border-style:solid;border-color:brown; border-width:2px&#8221;&#62;&#60;\/div&#62; &#60;script src=&#8221;dir_where_jsDraw2DX_resides\/jsDraw2DX.js&#8221;&#62;&#60;\/script&#62; &#60;script&#62; var gr0=new jxGraphics(document.getElementById(&#8220;grph&#8221;)); var &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/www.oracletutoring.ca\/blog\/web-design-graphics-outlined-text-with-jsdraw2dx\/\"> <span class=\"screen-reader-text\">Web Design:  graphics:  Outlined Text with jsDraw2DX<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1965,837],"tags":[1955],"class_list":["post-18235","post","type-post","status-publish","format-standard","hentry","category-jsdraw2dx-web-design","category-web-design","tag-outlined-text"],"_links":{"self":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/18235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/comments?post=18235"}],"version-history":[{"count":26,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/18235\/revisions"}],"predecessor-version":[{"id":35336,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/18235\/revisions\/35336"}],"wp:attachment":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/media?parent=18235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/categories?post=18235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/tags?post=18235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}