{"id":12253,"date":"2015-09-12T18:18:30","date_gmt":"2015-09-12T18:18:30","guid":{"rendered":"http:\/\/www.oracletutoring.ca\/blog\/?p=12253"},"modified":"2019-01-02T20:02:12","modified_gmt":"2019-01-02T20:02:12","slug":"web-programming-another-canvas-demo","status":"publish","type":"post","link":"https:\/\/www.oracletutoring.ca\/blog\/web-programming-another-canvas-demo\/","title":{"rendered":"Web programming:  another &lt;canvas&gt; demo"},"content":{"rendered":"<h1>The tutor continues to explore the html &lt;canvas&gt; tag.<\/h1>\n<p>The html &lt;canvas&gt; tag offers many possible displays with graphics. To my knowledge, it&#8217;s the only native way to produce web graphics with Javascript.<\/p>\n<p>Today, I&#8217;ll demonstrate a gradient effect:<\/p>\n<p><button id=\"but_jan2_2019\" onclick=\"showit()\">Click me for canvas demo:)<\/button><br \/>\n<canvas id=\"canvas0\" width=\"560\" height=\"100\"><\/canvas><br \/>\n<script type=\"text\/javascript\" src=\"\/javascripts\/sep12js.js\"><\/script><br \/>\n<img decoding=\"async\" id=\"canvas_jan2_2019\" src=\"\/images\/canvas_grad.png\"><\/p>\n<p style=\"white-space:pre-wrap;color:white\">space<br \/>\nspace<\/p>\n<p>Source:<\/p>\n<p><a href=\"http:\/\/www.w3schools.com\/\">w3schools.com<\/a><\/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 to explore the html &lt;canvas&gt; tag. The html &lt;canvas&gt; tag offers many possible displays with graphics. To my knowledge, it&#8217;s the only native way to produce web graphics with Javascript. Today, I&#8217;ll demonstrate a gradient effect: Click &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/www.oracletutoring.ca\/blog\/web-programming-another-canvas-demo\/\"> <span class=\"screen-reader-text\">Web programming:  another &lt;canvas&gt; demo<\/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":[105,837],"tags":[1039,1040,1026,205,821],"class_list":["post-12253","post","type-post","status-publish","format-standard","hentry","category-computer-science","category-web-design","tag-gradient","tag-graphics","tag-html-canvas-tag","tag-javascript","tag-web-programming"],"_links":{"self":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/12253","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=12253"}],"version-history":[{"count":30,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/12253\/revisions"}],"predecessor-version":[{"id":36786,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/12253\/revisions\/36786"}],"wp:attachment":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/media?parent=12253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/categories?post=12253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/tags?post=12253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}