{"id":352,"date":"2013-05-24T07:40:32","date_gmt":"2013-05-24T14:40:32","guid":{"rendered":"http:\/\/www.patrickmatte.com\/blog\/?p=352"},"modified":"2023-11-03T15:27:43","modified_gmt":"2023-11-03T22:27:43","slug":"color-halftone-filter-for-2d-canvas","status":"publish","type":"post","link":"https:\/\/www.patrickmatte.com\/?p=352","title":{"rendered":"Color halftone filter for canvas 2D"},"content":{"rendered":"<div class=\"text\">\n<div class=\"columnLeft\">My last project required applying a color halftone filter to uploaded user photos.<\/p>\n<p>After a quick search on google, the only thing I found was a webGL shader but what I needed was a filter for 2D canvas, even if it would be performing much slower. So I finally had to write the filter myself.<\/p>\n<\/div>\n<div class=\"columnRight\">\nGive it a try below and also play with the dot size slider for different results but remember that the smaller the dots, the longer it will take to render.<\/p>\n<p><a href=\"https:\/\/github.com\/patrickmatte\/color-halftone-filter\" target=\"_blank\" rel=\"noopener noreferrer\">Download the source on GitHub<\/a><\/p>\n<\/div>\n<\/div>\n<div style=\"position: relative; padding-top: 56.25%;\">\n<iframe scrolling=\"no\" style=\"position:absolute; width:10px; min-width:100%; height:10px; min-height:100%; top:0; left:0;\" src=\"https:\/\/patrickmatte.com\/stuff\/blog\/colorHalftone\/index.html\" frameborder=\"0\"><\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>My last project required applying a color halftone filter to uploaded user photos. After a quick search on google, the only thing I found was a webGL shader but what I needed was a filter for 2D canvas, even if it would be performing much slower. So I finally had to write the filter myself. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":360,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[44,45],"class_list":["post-352","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-experiments","tag-html","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.patrickmatte.com\/index.php?rest_route=\/wp\/v2\/posts\/352"}],"collection":[{"href":"https:\/\/www.patrickmatte.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.patrickmatte.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.patrickmatte.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.patrickmatte.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=352"}],"version-history":[{"count":45,"href":"https:\/\/www.patrickmatte.com\/index.php?rest_route=\/wp\/v2\/posts\/352\/revisions"}],"predecessor-version":[{"id":1268,"href":"https:\/\/www.patrickmatte.com\/index.php?rest_route=\/wp\/v2\/posts\/352\/revisions\/1268"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.patrickmatte.com\/index.php?rest_route=\/wp\/v2\/media\/360"}],"wp:attachment":[{"href":"https:\/\/www.patrickmatte.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.patrickmatte.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.patrickmatte.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}