--- title: Why you might want to build your WebApp in Canvas... description: A deep dive into why major companies like Google, Microsoft, and Canva use the HTML Canvas element instead of DOM elements for performance-critical web apps.... canonical: https://daily.dev/posts/why-you-might-want-to-build-your-webapp-in-canvas-instead-of-html-6ybil35ip twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Why you might want to build your WebApp in Canvas instead of HTML | daily.dev og:description: A deep dive into why major companies like Google, Microsoft, and Canva use the HTML Canvas element instead of DOM elements for performance-critical web apps.... og:url: https://daily.dev/posts/why-you-might-want-to-build-your-webapp-in-canvas-instead-of-html-6ybil35ip og:image: https://api.daily.dev/og/posts/6yBIL35Ip.png og:image:alt: Why you might want to build your WebApp in Canvas instead of HTML og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Why you might want to build your WebApp in Canvas instead of HTML **[Hacker News](https://daily.dev/sources/hn)** · 8 min read · 23 upvotes · 3 comments ## Summary A deep dive into why major companies like Google, Microsoft, and Canva use the HTML Canvas element instead of DOM elements for performance-critical web apps. Covers the trade-offs between Canvas and HTML, specific use cases where Canvas excels (infinite workspaces, zoomable grids, complex z-index layouts), and practical implementation patterns including layered canvases, pixel density management, coordinate translation, bounding box hit testing, and centralized rendering with requestAnimationFrame. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### When should I use Canvas instead of DOM elements for a web app? Canvas is a better fit when an interface behaves like a spatial scene rather than a document - for example apps with absolutely positioned or irregularly shaped elements, complex z-index needs, zooming and panning with camera transforms, or an app that already has a strong internal model of state and geometry needing only visualization. For most web apps, DOM remains better because it provides accessibility, responsive layouts, text selection, and input handling for free. _daily.dev surfaces practical trade-off breakdowns like this for developers weighing canvas versus DOM architecture decisions._ ### How do you keep Canvas rendering crisp on high pixel density screens? Scale the canvas element to the device's pixel ratio, then set the rendering context's scale to offset that same ratio so drawing code doesn't need to be pixel-density aware. Concretely, multiply canvas.width and canvas.height by Math.max(window.devicePixelRatio, 1), then call ctx.scale() with that same pixel scale value to keep output crisp across devices. _developers tuning canvas-based UIs for sharp rendering can find implementation patterns like this via daily.dev._ ### How do you detect which element a user clicked on in a Canvas-based app? Build and maintain an index of bounding boxes in screen space ahead of time, storing each element's x1, x2, y1, y2 coordinates, z-index, and an identifier. For larger numbers of elements, add spatial indices based on x and y coordinates, or use an R-Tree, to speed up hit-testing lookups when the user hovers or clicks. _daily.dev helps developers building custom canvas interaction and hit-testing systems find grounded implementation guidance._ ## Community discussion Top comments from developers on daily.dev. **@phamngocbien** · 1 upvotes > We are now in an era where computer RAM is quite powerful, and Google SEO is no longer important. **@fabooy961** · 0 upvotes > So imagine ur doing tricks and its may... Will you end up in the matrix? > >  ## Similar posts on daily.dev - [The Web Is Fun Again: First Experiments with HTML in Canvas – Frontend Masters Blog](https://daily.dev/posts/the-web-is-fun-again-first-experiments-with-html-in-canvas-frontend-masters-blog-n0q3syc0y) · Frontend Masters · 3 upvotes · 0 comments - [Exploring the HTML-in-Canvas Proposal](https://daily.dev/posts/exploring-the-html-in-canvas-proposal-62dkmwqtx) · Codrops · 2 upvotes · 0 comments - [New hope for better accessibility of 3D experiences on the web – Bogdan on Digital Accessibility \(A11y\)](https://daily.dev/posts/new-hope-for-better-accessibility-of-3d-experiences-on-the-web-bogdan-on-digital-accessibility-a1-qqyaexbea) · Bogdan on A11y · 4 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#performance](https://daily.dev/tags/performance) [View this post on daily.dev](https://daily.dev/posts/why-you-might-want-to-build-your-webapp-in-canvas-instead-of-html-6ybil35ip) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Why you might want to build your WebApp in Canvas instead of HTML","url":"https://daily.dev/posts/why-you-might-want-to-build-your-webapp-in-canvas-instead-of-html-6ybil35ip","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/why-you-might-want-to-build-your-webapp-in-canvas-instead-of-html-6ybil35ip"},"datePublished":"2026-08-09T12:18:48.779Z","dateModified":"2026-09-14T07:29:26.368Z","description":"A deep dive into why major companies like Google, Microsoft, and Canva use the HTML Canvas element instead of DOM elements for performance-critical web apps....","image":"https://media.daily.dev/image/upload/s--P4t4XyoV--/f_auto/v1722860399/public/Placeholder%2001","thumbnailUrl":"https://media.daily.dev/image/upload/s--P4t4XyoV--/f_auto/v1722860399/public/Placeholder%2001","isAccessibleForFree":true,"articleSection":"Hacker News","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Hacker News","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/hn","url":"https://daily.dev/sources/hn"},"commentCount":3,"discussionUrl":"https://daily.dev/posts/why-you-might-want-to-build-your-webapp-in-canvas-instead-of-html-6ybil35ip","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":23},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"webdev,javascript,performance","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Hacker News","item":"https://daily.dev/sources/hn"},{"@type":"ListItem","position":3,"name":"Why you might want to build your WebApp in Canvas instead of HTML"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/why-you-might-want-to-build-your-webapp-in-canvas-instead-of-html-6ybil35ip","comment":[{"@type":"Comment","text":"We are now in an era where computer RAM is quite powerful, and Google SEO is no longer important.","datePublished":"2026-08-10T02:53:23.279Z","url":"https://daily.dev/posts/6yBIL35Ip#c-KzpMLgeTK","author":{"@type":"Person","name":"BienDev","url":"https://daily.dev/phamngocbien","image":"https://lh3.googleusercontent.com/a/ACg8ocIsRgD1KaJHMuQIYp77hy5BEFOpeIr2mQzpVea3Q2rbO_yG1P4=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"So imagine ur doing tricks and its may… Will you end up in the matrix?","datePublished":"2026-08-14T08:14:41.957Z","url":"https://daily.dev/posts/6yBIL35Ip#c-1oOPlI3Co","author":{"@type":"Person","name":"Le Fä De Le Lö","url":"https://daily.dev/fabooy961","image":"https://media.daily.dev/image/upload/v1677218265/avatars/avatar_H6lLM2y9S4Yf8VCWicpd8.jpg"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/why-you-might-want-to-build-your-webapp-in-canvas-instead-of-html-6ybil35ip#faq","mainEntity":[{"@type":"Question","name":"When should I use Canvas instead of DOM elements for a web app?","acceptedAnswer":{"@type":"Answer","text":"Canvas is a better fit when an interface behaves like a spatial scene rather than a document - for example apps with absolutely positioned or irregularly shaped elements, complex z-index needs, zooming and panning with camera transforms, or an app that already has a strong internal model of state and geometry needing only visualization. For most web apps, DOM remains better because it provides accessibility, responsive layouts, text selection, and input handling for free. daily.dev surfaces practical trade-off breakdowns like this for developers weighing canvas versus DOM architecture decisions."}},{"@type":"Question","name":"How do you keep Canvas rendering crisp on high pixel density screens?","acceptedAnswer":{"@type":"Answer","text":"Scale the canvas element to the device's pixel ratio, then set the rendering context's scale to offset that same ratio so drawing code doesn't need to be pixel-density aware. Concretely, multiply canvas.width and canvas.height by Math.max(window.devicePixelRatio, 1), then call ctx.scale() with that same pixel scale value to keep output crisp across devices. developers tuning canvas-based UIs for sharp rendering can find implementation patterns like this via daily.dev."}},{"@type":"Question","name":"How do you detect which element a user clicked on in a Canvas-based app?","acceptedAnswer":{"@type":"Answer","text":"Build and maintain an index of bounding boxes in screen space ahead of time, storing each element's x1, x2, y1, y2 coordinates, z-index, and an identifier. For larger numbers of elements, add spatial indices based on x and y coordinates, or use an R-Tree, to speed up hit-testing lookups when the user hovers or clicks. daily.dev helps developers building custom canvas interaction and hit-testing systems find grounded implementation guidance."}}]} ```