{"id":101,"date":"2009-09-16T23:25:10","date_gmt":"2009-09-17T05:25:10","guid":{"rendered":"http:\/\/www.crccheck.com\/blog\/?p=101"},"modified":"2015-10-11T22:30:41","modified_gmt":"2015-10-12T04:30:41","slug":"teaching-myself-the-html-canvas-element","status":"publish","type":"post","link":"https:\/\/www.crccheck.com\/blog\/teaching-myself-the-html-canvas-element\/","title":{"rendered":"Teaching Myself the HTML Canvas Element"},"content":{"rendered":"

I rewrote some JavaScript of mine to use <canvas> instead of a <pre> block to display some data from a database scraped from a webpage. So far, it’s looking a lot nicer:
\n\"CanvasTest1\"I can do all sorts of other cool visualizations of the data too. Some things I learned that weren’t in the Mozilla documentation:<\/p>\n

save(), restore(), scale(), and translate() are useful, but when you want to do operations about a point other than the origin, setTransform() does a much nicer job when you use a point other 0,0 for the origin. I could have sworn there was a way that didn’t involve me doing math to do it, but I couldn’t find it and ended up just doing the math to get setTransform to work.<\/p>\n

scale() does a really horrible job. I abandoned using tiled images and scaled Text. As you can see, I went with a solid background, and in that picture I removed for aesthetics — but I ended up writing my own custom method for scaling text (I had to do more math!).<\/p>\n

I’m not sure how far I’ll take this, or in what direction, but I’ll have fun along the way.<\/p>\n","protected":false},"excerpt":{"rendered":"

I rewrote some JavaScript of mine to use <canvas> instead of a <pre> block to display some data from a database scraped from a webpage. So far, it’s looking a lot nicer: I can do all sorts of other cool visualizations of the data too. Some things I learned that weren’t in the Mozilla documentation:…<\/p>\n Read More<\/span> Teaching Myself the HTML Canvas Element<\/span><\/a>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"Layout":"","footnotes":""},"categories":[4],"tags":[],"class_list":["entry","author-showmewhatyougot","post-101","post","type-post","status-publish","format-standard","category-technical"],"_links":{"self":[{"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/posts\/101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/comments?post=101"}],"version-history":[{"count":1,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/posts\/101\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/posts\/101\/revisions\/103"}],"wp:attachment":[{"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/media?parent=101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/categories?post=101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/tags?post=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}