{"id":103,"date":"2011-12-04T23:44:10","date_gmt":"2011-12-05T07:44:10","guid":{"rendered":"http:\/\/michael.lavaveshkul.com\/blog\/?p=103"},"modified":"2019-02-03T00:02:12","modified_gmt":"2019-02-03T08:02:12","slug":"started-playing-with-canvas","status":"publish","type":"post","link":"https:\/\/michael.lavaveshkul.com\/blog\/2011\/12\/started-playing-with-canvas\/","title":{"rendered":"Started Playing with Canvas"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">I just started to play with the canvas element over the weekend. I started with trying to recreate my logo. You&#8217;ll need a modern browser to see this&#8230;<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" src=\"\/\/michael.lavaveshkul.com\/projects\/ml_canvas\/example.html\" style=\"border:none; overflow:hidden\" width=\"455\" height=\"255\"><\/iframe><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Not bad, right? I&#8217;ll probably change it so the fill is more flexible or something. I ran into issues with the negative space because clearing it out will clear anything underneath. But if you notice above, the squares are still intact. I was able to achieve this by drawing my logo in a separate canvas element and then drawing the contents in the canvas above. Credits to <a href=\"http:\/\/stackoverflow.com\/questions\/4821679\/canvas-clip-reverse-action\/5776639#5776639\" target=\"stackoverflow\">this post on Stack Overflow<\/a> for helping me solve this issue. The negative space is done by filling in the outer shape, then changing <a href=\"https:\/\/developer.mozilla.org\/en\/Canvas_tutorial\/Compositing\" target=\"mozilla\">globalCompositeOperation<\/a> to &#8216;destination-out&#8217;.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;d like to see the source for drawing the logo, you can find it <a href=\"\/\/michael.lavaveshkul.com\/projects\/ml_canvas\/ml-logo.js\" target=\"logojs\">here<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The main resource I used was <a href=\"https:\/\/developer.mozilla.org\/en\/Canvas_tutorial\" target=\"mozilla\">Mozilla&#8217;s Canvas Tutorial<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I just started to play with the canvas element over the weekend. I started with trying to recreate my logo. You&#8217;ll need a modern browser to see this&#8230; Not bad, right? I&#8217;ll probably change it so the fill is more flexible or something. I ran into issues with the negative space because clearing it out &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/michael.lavaveshkul.com\/blog\/2011\/12\/started-playing-with-canvas\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Started Playing with Canvas&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-103","post","type-post","status-publish","format-standard","hentry","category-project"],"_links":{"self":[{"href":"https:\/\/michael.lavaveshkul.com\/blog\/wp-json\/wp\/v2\/posts\/103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/michael.lavaveshkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/michael.lavaveshkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/michael.lavaveshkul.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/michael.lavaveshkul.com\/blog\/wp-json\/wp\/v2\/comments?post=103"}],"version-history":[{"count":35,"href":"https:\/\/michael.lavaveshkul.com\/blog\/wp-json\/wp\/v2\/posts\/103\/revisions"}],"predecessor-version":[{"id":794,"href":"https:\/\/michael.lavaveshkul.com\/blog\/wp-json\/wp\/v2\/posts\/103\/revisions\/794"}],"wp:attachment":[{"href":"https:\/\/michael.lavaveshkul.com\/blog\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/michael.lavaveshkul.com\/blog\/wp-json\/wp\/v2\/categories?post=103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/michael.lavaveshkul.com\/blog\/wp-json\/wp\/v2\/tags?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}