{"id":45717,"date":"2019-07-26T03:01:06","date_gmt":"2019-07-25T17:01:06","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45717"},"modified":"2019-07-25T20:57:07","modified_gmt":"2019-07-25T10:57:07","slug":"htmljavascript-areas-canvas-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-areas-canvas-tutorial\/","title":{"rendered":"HTML\/Javascript Areas Canvas Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Areas\/areas.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Areas Canvas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Areas\/areas_visual.jpg\" title=\"HTML\/Javascript Areas Canvas Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Areas Canvas Tutorial<\/p><\/div>\n<p>In revisiting the <a title='HTML\/Javascript Areas Tutorial' href='#htmljat'>HTML\/Javascript Areas Tutorial<\/a> of some years back now, a recent common theme occurred to us &#8230; a lack of visuals.  This game could be made much more interesting, we think, by showing a graphical view of a lot of the Area questions asked, being that so many of us benefit from an element of visual learning.<\/p>\n<p>Now, here, as far as adding a graphical approach, off the top of our head, we can think of &#8230;<\/p>\n<ul>\n<li>SVG<\/li>\n<li>canvas<\/li>\n<li>horizontal rules (with graph &#8220;snap&#8221; background)<\/li>\n<\/ul>\n<p> &#8230; and it&#8217;s the HTML5 <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element we&#8217;ve plumped for today&#8217;s &#8220;graphical palette&#8221;.<\/p>\n<p>We &#8230;<\/p>\n<ol>\n<li>create the HTML5 canvas element &#8230; right at the end of the <i>body<\/i> element (just before &lt;\/body&gt;) &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  document.write('&lt;br&gt;&lt;br&gt;&lt;canvas id=ourcanvas width=' + ('' + eval(-15 + (window.orientation == 0 ? window.screen.height: window.screen.width)) + 'px').replace('pxpx','').replace('px','') + ' height=580 style=\"width:' + ('' + eval(-15 + (window.orientation == 0 ? window.screen.height: window.screen.width)) + 'px').replace('pxpx','px') + ';height:580px;border:1px solid red;background-color:white;\"&gt;&lt;\/canvas&gt;');<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<li>we establish some global variable assignments <b>via<\/b> &#8230; &lt;body align=&#8221;center&#8221; style=&#8221;background-color: lightblue;&#8221; onload=&#8221; <b>makevisible(ideas[snum]);<\/b>&#8220;&gt; &#8230;<br \/>\n<code><br \/>\nvar done=0;<br \/>\nvar elem=null;<br \/>\nvar context=null;<br \/>\nvar cwidth=0, cheight=0;<br \/>\nvar ideas = [\"circle\", \"sector\", \"square\", \"rectangle\", \"triangle\", \"parallelogram\", \"kite\", \"trapezium\", \"rhombus\", \"rectangle_hsector\", \"rectangle_lsector\", \"parallelogram_rectangle_cutout\"];<br \/>\nvar done = 0;<br \/>\nvar factor=1.0;<br \/>\nvar cf = \"12px Verdana\";<br \/>\nvar path=null;<br \/>\nvar snum = Math.floor(Math.random() * ideas.length) + 0;<br \/>\nif (snum == 2) { snum=3; }<br \/>\n<br \/>\nfunction makevisible(whichone) {<br \/>\n  var px=0, py=0, pxx=0;<br \/>\n  if (done == 0) {<br \/>\n   done = 1;<br \/>\n   document.getElementById('sarea').value = whichone;<br \/>\n   <b>elem=document.getElementById('ourcanvas');<br \/>\n   context=elem.getContext('2d');<br \/>\n   cwidth=eval(-70 + eval(('' + elem.width).replace('px','')));<br \/>\n   cheight=eval(-90 + eval(('' + elem.height).replace('px','')));<\/b><br \/>\n  }<br \/>\n  \/\/ more below<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>we <b>intervene<\/b> &#8230; for example below it is a &#8220;Sector&#8221; area question example &#8230;<br \/>\n<code><br \/>\nif (whichone == \"sector\") {<br \/>\n      rnum = Math.floor(Math.random() * 1000) + 1;<br \/>\n      document.getElementById('sr').value = rnum;<br \/>\n      rnum = Math.floor(Math.random() * 359) + 1;<br \/>\n      document.getElementById('arc').value = rnum;<br \/>\n      hint = 'Hint: A = ' + Math.PI + ' * r * r * (a \/ 360.0)';<br \/>\n <b>factor=getFactor(eval(2 * eval('' + document.getElementById('sr').value)), eval(2 * eval('' + document.getElementById('sr').value)));<br \/>\n context.font = cf;<br \/>\n context.strokeStyle = '#FF0000';<br \/>\n context.beginPath();<br \/>\n context.moveTo(Math.round(eval(25 + eval(cwidth \/ 2))), Math.round(eval(25 + eval(cheight \/ 2))));<br \/>\n context.lineTo(Math.round(eval(25 + eval(cwidth \/ 2))) + eval(rnum * Math.abs(factor)), Math.round(eval(25 + eval(cheight \/ 2))));<br \/>\n context.arc(Math.round(eval(25 + eval(cwidth \/ 2))), Math.round(eval(25 + eval(cheight \/ 2))), eval(rnum * Math.abs(factor)), 0, eval(eval(eval(document.getElementById('arc').value) \/ 180) * Math.PI));<br \/>\n context.lineTo(Math.round(eval(25 + eval(cwidth \/ 2))), Math.round(eval(25 + eval(cheight \/ 2))));<br \/>\n context.fillStyle = '#40FF20';<br \/>\n context.fill();<br \/>\n context.fillStyle = \"#000000\";<br \/>\n context.fillText(\"\" + document.getElementById('sr').value + \" --------&gt;\", Math.round(eval(25 + eval(cwidth \/ 2))), Math.round(eval(25 + eval(cheight \/ 2))), eval(rnum * Math.abs(factor)));<\/b><br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; calling that new Javascript function &#8230;<br \/>\n<code><br \/>\nfunction getFactor(wis, lis) {<br \/>\n  var proposedfactor=eval(Math.max(cwidth, cheight) \/ Math.max(wis, lis));<br \/>\n  if (eval(Math.min(cwidth, cheight) \/ Math.min(wis, lis)) &lt; proposedfactor) {<br \/>\n   proposedfactor=eval(-1 * eval(Math.min(cwidth, cheight) \/ Math.min(wis, lis)));<br \/>\n  }<br \/>\n  if (proposedfactor &gt; 0.0) {<br \/>\n    if (eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('l').value)))) &gt; cwidth || eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('w').value)))) &gt; cheight) {<br \/>\n      while (eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('w').value)))) &gt; cwidth || eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('l').value)))) &gt; cheight) {<br \/>\n        proposedfactor*=0.8;<br \/>\n      }<br \/>\n      proposedfactor=-proposedfactor;<br \/>\n    }<br \/>\n  } else {<br \/>\n    if (eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('w').value)))) &gt; cwidth || eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('l').value)))) &gt; cheight) {<br \/>\n      proposedfactor=-proposedfactor;<br \/>\n      while (eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('l').value)))) &gt; cwidth || eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('w').value)))) &gt; cheight) {<br \/>\n        proposedfactor*=0.8;<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  return proposedfactor;<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p>Before we go we want to show you the &#8220;triangle&#8221; <b>intervention<\/b> code snippet to introduce the really useful <a target=_blank title='Path2D information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Path2D\/Path2D' title='Path2D object'<i>Path2D<\/i><\/a> object (usage) &#8230;<\/p>\n<p><code><br \/>\nif (whichone == \"triangle\") {<br \/>\n      rnum = Math.floor(Math.random() * 1000) + 1;<br \/>\n      document.getElementById('b').value = rnum;<br \/>\n      rnum = Math.floor(Math.random() * 1000) + 1;<br \/>\n      document.getElementById('h').value = rnum;<br \/>\n      hint = 'Hint: A = 0.5 * b * h';<br \/>\n <b>factor=getFactor(document.getElementById('b').value, document.getElementById('h').value);<br \/>\n context.font = cf;<br \/>\n context.fillStyle = \"#AAAAAA\";<br \/>\n if (factor &gt; 0.0) { \/\/ eval(25 + eval(Math.abs(factor) *<br \/>\n   factor\/=6;<br \/>\n        \t\tpy=eval(eval(Math.abs(factor) * eval('' + document.getElementById('h').value)) \/ 1);<br \/>\n        \t\tpx=eval(eval(Math.abs(factor) * eval('' + document.getElementById('b').value)) \/ 1);<br \/>\n         \t\tpath=new <i>Path2D<\/i>();<br \/>\n        \t\tpath.moveTo(eval((cwidth\/2)+25) + px,(cheight\/2)+25);<br \/>\n        \t\tpath.lineTo((cwidth\/2)+25,eval((cheight\/2)+25));<br \/>\n        \t\tpath.lineTo((cwidth\/2)+25,eval((cheight\/2)+25) - py);<br \/>\n        \t\tpath.lineTo(eval((cwidth\/2)+25) + px,(cheight\/2)+25);<br \/>\n        \t\tcontext.fill(path);<br \/>\n context.fillStyle = \"#000000\";<br \/>\n context.fillText(\"&lt;--- \" + document.getElementById('b').value + \" ---&gt;\", Math.round(eval(25 + eval(cwidth \/ 2))), Math.round(eval(45 + eval(cheight \/ 2))), eval(rnum * Math.abs(factor)));<\/b><br \/>\n }<br \/>\n<\/code><\/p>\n<p>So here is <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Areas\/areas.html-GETME' title='areas.html'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Areas\/areas.html-GETME' title='areas.html'>areas.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Areas\/areas.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='htmljat'>Previous relevant <a target=_blank title='HTML\/Javascript Areas Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-areas-tutorial\/'>HTML\/Javascript Areas 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\/Areas\/areas.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Areas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Areas\/AreasMathsGame.jpg\" title=\"HTML\/Javascript Areas Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Areas Tutorial<\/p><\/div>\n<p>Here is a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Areas\/areas.html\" title='HTML\/Javascript Areas Tutorial'>tutorial<\/a> showing some client-side basics in HTML and Javascript that can test some fairly simple mathematical Areas questions for the user.   The inspiration for this came from some homework of a student.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Areas\/areas.html_GETME' title='areas.html'>areas.html<\/a> &#8230; and here is a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Areas\/areas.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>You&#8217;ll notice heavy use of the Javascript <a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> function to supply some shape dimensions.<\/p>\n<p>Please note that calculations involving PI would need a final accuracy to 0.01 to be deemed a correct answer.   The answer &#8220;<a target=_blank href='https:\/\/www.youtube.com\/watch?v=-a-DsIo81e8' title='Pork'>pork<\/a>&#8221; will not be accepted, alas.<\/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='#d7831' onclick='var dv=document.getElementById(\"d7831\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d7831' 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='#d45717' onclick='var dv=document.getElementById(\"d45717\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45717' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In revisiting the HTML\/Javascript Areas Tutorial of some years back now, a recent common theme occurred to us &#8230; a lack of visuals. This game could be made much more interesting, we think, by showing a graphical view of a &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-areas-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,37],"tags":[101,184,476,484,541,576,652,752,2120,3017,997,1319,3018],"class_list":["post-45717","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-areas","tag-canvas","tag-game","tag-geometry","tag-graphics","tag-html","tag-javascript","tag-mathematics","tag-path","tag-path2d","tag-programming","tag-tutorial","tag-visual"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45717"}],"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=45717"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45717\/revisions"}],"predecessor-version":[{"id":45719,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45717\/revisions\/45719"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=45717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=45717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=45717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}