{"id":1444,"date":"2025-04-27T13:16:28","date_gmt":"2025-04-27T11:16:28","guid":{"rendered":"https:\/\/stuff.tamius.net\/sacred-texts\/?p=1444"},"modified":"2025-04-27T17:34:05","modified_gmt":"2025-04-27T15:34:05","slug":"browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs","status":"publish","type":"post","link":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/","title":{"rendered":"Browser lied, performance died: a bit about HTML Canvas&#8217; 2D context (and why you should read the docs)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Before I <a href=\"https:\/\/stuff.tamius.net\/sacred-texts\/2024\/10\/02\/hot-dang-i-shouldnt-have-given-on-webgl\/\">decided to revisit using WebGL for Ultrawidify&#8217;s aspect ratio detection<\/a>, said autodetection was running off your standard, basic, non-webGL canvas context. This no longer happens, because <code>CanvasRenderingContext2D<\/code> is (was) <strong>slow. <\/strong>We are talking &#8220;double digit ms&#8221;, which resulted in some people experiencing dropped frames on higher resolution videos on certain hardware.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Which is why I was at least mildly conscious about performance implications of my decisions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When Chrome&#8217;s dev tools helpfully suggested:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"82\" src=\"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-1024x82.png\" alt=\"\" class=\"wp-image-1445\" srcset=\"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-1024x82.png 1024w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-300x24.png 300w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-768x61.png 768w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-1140x91.png 1140w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika.png 1363w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For those not in the know \u2014 if you want to extract video frame into something you can work with, you need a canvas and two functions.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code>drawImage()<\/code> will draw current video frame to canvas<\/li>\n\n\n\n<li><code>getImageData()<\/code> will then convert the image on the canvas into something you can work with in code<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Of the two functions, <code>drawImage()<\/code> is more expensive \u2014 and it&#8217;s not even close. Since <code>drawImage()<\/code> also resizes video frame to fit the canvas, it&#8217;s also necessary for this function to be hardware accelerated.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So when I went to MDN and saw this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/getContext#willreadfrequently\"><code>willReadFrequently<\/code><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A boolean value that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CanvasRenderingContext2D\/getImageData\"><code>getImageData()<\/code><\/a> frequently.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">I was like: <strong>hell no. <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Autodetection hasn&#8217;t had issues with memory leaks in literal years, and I haven&#8217;t had memory issues in literal years. There&#8217;s no universe in which <code>willReadFrequently<\/code> makes sense for my specific use case.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And I left it at that, until this week.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Look At This Noob Mistake<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When you have an extension on Github, you&#8217;re gonna get your project forked. Very rarely is it gonna be someone who is interested in helping you out \u2014 more often it&#8217;s gonna be someone with a bone to pick.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These forks sometimes bring some fun stuff, such as: <em>using docker to build the extension <\/em>(which is hugely overkill). Sometimes, they contain things that you can yoink. And sometimes &#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"541\" src=\"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-5.png\" alt=\"\" class=\"wp-image-1453\" srcset=\"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-5.png 1024w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-5-300x158.png 300w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-5-768x406.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">[To the tune of Nickleback] &#8220;Look at this noob mistake, every time I see it, makes my CPU ache&#8221;<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Or so I though, because this has gnawed on me for about a day now. Is using <code>willReadFrequently<\/code> <em>really <\/em>a noob mistake? It has just occurred me that I&#8217;ve always only <em>assumed <\/em>that using <code>willReadFrequently<\/code> is significantly slower because MDN said I lose hardware acceleration. But just because some page on the internet says it, it doesn&#8217;t mean it&#8217;s true. Does this guy know something I don&#8217;t? <em>It&#8217;s more likely than you think.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now that I have new graphs for debugging, I can actually &#8230; you know, <em>test <\/em>this. So turns out that no, I&#8217;m absolutely right once for a change.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-6-1024x538.png\" alt=\"\" class=\"wp-image-1459\" srcset=\"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-6-1024x538.png 1024w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-6-300x158.png 300w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-6-768x404.png 768w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-6-1140x599.png 1140w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-6.png 1370w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Look at this graaaaaph<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image alignfull size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"117\" src=\"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-3-1024x117.png\" alt=\"\" class=\"wp-image-1449\" srcset=\"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-3-1024x117.png 1024w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-3-300x34.png 300w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-3-768x87.png 768w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-3-1536x175.png 1536w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-3-1140x130.png 1140w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-3.png 1607w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">WebGL context<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image alignfull size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"122\" src=\"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-2-1024x122.png\" alt=\"\" class=\"wp-image-1450\" srcset=\"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-2-1024x122.png 1024w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-2-300x36.png 300w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-2-768x92.png 768w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-2-1536x183.png 1536w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-2-1140x136.png 1140w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-2.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">2d context, willReadFrequently not set<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image alignfull size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"111\" src=\"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-1-1024x111.png\" alt=\"\" class=\"wp-image-1446\" srcset=\"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-1-1024x111.png 1024w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-1-300x33.png 300w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-1-768x83.png 768w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-1-1536x167.png 1536w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-1-1140x124.png 1140w, https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-1.png 1666w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">2d context, willReadFrequently set to true.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">So here&#8217;s three takeaways that I have from this.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>I <em>was <\/em>right to avoid <code>willReadFrequently<\/code> flag. While it <em><span style=\"text-decoration: underline;\">does<\/span><\/em> make reading from canvas significantly faster (reading from canvas goes from ~3ms to ~1ms), that 2ms performance improvement costs us 35+ms performance penalty during the &#8220;draw to canvas&#8221; step of the process.<\/li>\n\n\n\n<li>It appears that Chrome&#8217;s hardware acceleration of 2D canvas has improved massively in the last 6 months<\/li>\n\n\n\n<li><em>Hot dang, hardware accelerated <code>drawImage()<\/code> on 2D canvas context is just as fast as doing it manually with WebGL<\/em>. If I knew Chrome will make 2d canvas this much faster, I wouldn&#8217;t even bother with WebGL.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Though on the other hand, WebGL will still come in handy once I start porting manifest v3 version to Firefox.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While using willReadFrequently does make reading data from a 2D HTML Canvas faster, it significantly worsens overall performance if you also draw to canvas a lot. <span class=\"more-tag d-block mt-05\"><a class=\"more-link\" href=\"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/\">Continue Reading...<span class=\"screen-reader-text\"> \"Browser lied, performance died: a bit about HTML Canvas&#8217; 2D context (and why you should read the docs)\"<\/span><\/a><\/span><!-- .more-tag --><\/p>\n","protected":false},"author":1,"featured_media":1459,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[9],"tags":[],"class_list":["post-1444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ultrawidify"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Browser lied, performance died: a bit about HTML Canvas&#039; 2D context (and why you should read the docs) - Tamius&#039; sacred texts<\/title>\n<meta name=\"description\" content=\"While using willReadFrequently makes reading data from a 2DCanvas faster, it absolutely wrecks overall performance if you also draw a lot.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Browser lied, performance died: a bit about HTML Canvas&#039; 2D context (and why you should read the docs) - Tamius&#039; sacred texts\" \/>\n<meta property=\"og:description\" content=\"While using willReadFrequently makes reading data from a 2DCanvas faster, it absolutely wrecks overall performance if you also draw a lot.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/\" \/>\n<meta property=\"og:site_name\" content=\"Tamius&#039; sacred texts\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-27T11:16:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-27T15:34:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-6.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1370\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tamius Han\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tamius Han\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/2025\\\/04\\\/27\\\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/2025\\\/04\\\/27\\\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\\\/\"},\"author\":{\"name\":\"Tamius Han\",\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/#\\\/schema\\\/person\\\/4677d05a4f45974f27cd21481c561c21\"},\"headline\":\"Browser lied, performance died: a bit about HTML Canvas&#8217; 2D context (and why you should read the docs)\",\"datePublished\":\"2025-04-27T11:16:28+00:00\",\"dateModified\":\"2025-04-27T15:34:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/2025\\\/04\\\/27\\\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\\\/\"},\"wordCount\":606,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/2025\\\/04\\\/27\\\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/slika-6.png\",\"articleSection\":[\"Ultrawidify\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/2025\\\/04\\\/27\\\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/2025\\\/04\\\/27\\\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\\\/\",\"url\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/2025\\\/04\\\/27\\\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\\\/\",\"name\":\"Browser lied, performance died: a bit about HTML Canvas' 2D context (and why you should read the docs) - Tamius&#039; sacred texts\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/2025\\\/04\\\/27\\\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/2025\\\/04\\\/27\\\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/slika-6.png\",\"datePublished\":\"2025-04-27T11:16:28+00:00\",\"dateModified\":\"2025-04-27T15:34:05+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/#\\\/schema\\\/person\\\/4677d05a4f45974f27cd21481c561c21\"},\"description\":\"While using willReadFrequently makes reading data from a 2DCanvas faster, it absolutely wrecks overall performance if you also draw a lot.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/2025\\\/04\\\/27\\\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/2025\\\/04\\\/27\\\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/2025\\\/04\\\/27\\\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/slika-6.png\",\"contentUrl\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/slika-6.png\",\"width\":1370,\"height\":720,\"caption\":\"Look at this graaaaaph\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/2025\\\/04\\\/27\\\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Browser lied, performance died: a bit about HTML Canvas&#8217; 2D context (and why you should read the docs)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/#website\",\"url\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/\",\"name\":\"Tamius&#039; sacred texts\",\"description\":\"... containing one of the weirdest mix of pointless topics.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/#\\\/schema\\\/person\\\/4677d05a4f45974f27cd21481c561c21\",\"name\":\"Tamius Han\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1ce12569905c4aff5d48778af8527565f1175c254ad56cc5e5221666ff1e222b?s=96&d=blank&r=pg\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1ce12569905c4aff5d48778af8527565f1175c254ad56cc5e5221666ff1e222b?s=96&d=blank&r=pg\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1ce12569905c4aff5d48778af8527565f1175c254ad56cc5e5221666ff1e222b?s=96&d=blank&r=pg\",\"caption\":\"Tamius Han\"},\"url\":\"https:\\\/\\\/stuff.tamius.net\\\/sacred-texts\\\/author\\\/tamius-han\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Browser lied, performance died: a bit about HTML Canvas' 2D context (and why you should read the docs) - Tamius&#039; sacred texts","description":"While using willReadFrequently makes reading data from a 2DCanvas faster, it absolutely wrecks overall performance if you also draw a lot.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/","og_locale":"en_US","og_type":"article","og_title":"Browser lied, performance died: a bit about HTML Canvas' 2D context (and why you should read the docs) - Tamius&#039; sacred texts","og_description":"While using willReadFrequently makes reading data from a 2DCanvas faster, it absolutely wrecks overall performance if you also draw a lot.","og_url":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/","og_site_name":"Tamius&#039; sacred texts","article_published_time":"2025-04-27T11:16:28+00:00","article_modified_time":"2025-04-27T15:34:05+00:00","og_image":[{"width":1370,"height":720,"url":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-6.png","type":"image\/png"}],"author":"Tamius Han","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Tamius Han","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/#article","isPartOf":{"@id":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/"},"author":{"name":"Tamius Han","@id":"https:\/\/stuff.tamius.net\/sacred-texts\/#\/schema\/person\/4677d05a4f45974f27cd21481c561c21"},"headline":"Browser lied, performance died: a bit about HTML Canvas&#8217; 2D context (and why you should read the docs)","datePublished":"2025-04-27T11:16:28+00:00","dateModified":"2025-04-27T15:34:05+00:00","mainEntityOfPage":{"@id":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/"},"wordCount":606,"commentCount":0,"image":{"@id":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/#primaryimage"},"thumbnailUrl":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-6.png","articleSection":["Ultrawidify"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/","url":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/","name":"Browser lied, performance died: a bit about HTML Canvas' 2D context (and why you should read the docs) - Tamius&#039; sacred texts","isPartOf":{"@id":"https:\/\/stuff.tamius.net\/sacred-texts\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/#primaryimage"},"image":{"@id":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/#primaryimage"},"thumbnailUrl":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-6.png","datePublished":"2025-04-27T11:16:28+00:00","dateModified":"2025-04-27T15:34:05+00:00","author":{"@id":"https:\/\/stuff.tamius.net\/sacred-texts\/#\/schema\/person\/4677d05a4f45974f27cd21481c561c21"},"description":"While using willReadFrequently makes reading data from a 2DCanvas faster, it absolutely wrecks overall performance if you also draw a lot.","breadcrumb":{"@id":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/#primaryimage","url":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-6.png","contentUrl":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-content\/uploads\/2025\/04\/slika-6.png","width":1370,"height":720,"caption":"Look at this graaaaaph"},{"@type":"BreadcrumbList","@id":"https:\/\/stuff.tamius.net\/sacred-texts\/2025\/04\/27\/browser-lied-performance-died-a-bit-about-html-canvas-2d-context-and-why-you-should-read-the-docs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stuff.tamius.net\/sacred-texts\/"},{"@type":"ListItem","position":2,"name":"Browser lied, performance died: a bit about HTML Canvas&#8217; 2D context (and why you should read the docs)"}]},{"@type":"WebSite","@id":"https:\/\/stuff.tamius.net\/sacred-texts\/#website","url":"https:\/\/stuff.tamius.net\/sacred-texts\/","name":"Tamius&#039; sacred texts","description":"... containing one of the weirdest mix of pointless topics.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stuff.tamius.net\/sacred-texts\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/stuff.tamius.net\/sacred-texts\/#\/schema\/person\/4677d05a4f45974f27cd21481c561c21","name":"Tamius Han","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/1ce12569905c4aff5d48778af8527565f1175c254ad56cc5e5221666ff1e222b?s=96&d=blank&r=pg","url":"https:\/\/secure.gravatar.com\/avatar\/1ce12569905c4aff5d48778af8527565f1175c254ad56cc5e5221666ff1e222b?s=96&d=blank&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1ce12569905c4aff5d48778af8527565f1175c254ad56cc5e5221666ff1e222b?s=96&d=blank&r=pg","caption":"Tamius Han"},"url":"https:\/\/stuff.tamius.net\/sacred-texts\/author\/tamius-han\/"}]}},"_links":{"self":[{"href":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-json\/wp\/v2\/posts\/1444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-json\/wp\/v2\/comments?post=1444"}],"version-history":[{"count":7,"href":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-json\/wp\/v2\/posts\/1444\/revisions"}],"predecessor-version":[{"id":1464,"href":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-json\/wp\/v2\/posts\/1444\/revisions\/1464"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-json\/wp\/v2\/media\/1459"}],"wp:attachment":[{"href":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-json\/wp\/v2\/media?parent=1444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-json\/wp\/v2\/categories?post=1444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stuff.tamius.net\/sacred-texts\/wp-json\/wp\/v2\/tags?post=1444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}