--- title: Part 4: I Can’t Draw. So I Made an Entire Game’s Art Out... description: A solo indie game developer explains how they built all visual art for their idle game 'Pure Idle' using only JavaScript and HTML5 Canvas math — no images, no... canonical: https://daily.dev/posts/part-4-i-can-t-draw-so-i-made-an-entire-game-s-art-out-of-math-instead-wbrfszexs twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Part 4: I Can’t Draw. So I Made an Entire Game’s Art Out of Math Instead | daily.dev og:description: A solo indie game developer explains how they built all visual art for their idle game 'Pure Idle' using only JavaScript and HTML5 Canvas math — no images, no... og:url: https://daily.dev/posts/part-4-i-can-t-draw-so-i-made-an-entire-game-s-art-out-of-math-instead-wbrfszexs og:image: https://api.daily.dev/og/posts/WbRFSzeXs.png og:image:alt: Part 4: I Can’t Draw. So I Made an Entire Game’s Art Out of Math Instead 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. # Part 4: I Can’t Draw. So I Made an Entire Game’s Art Out of Math Instead **[Medium](https://daily.dev/sources/medium_js)** · 9 min read · 0 upvotes · 0 comments ## Summary A solo indie game developer explains how they built all visual art for their idle game 'Pure Idle' using only JavaScript and HTML5 Canvas math — no images, no artist. Buildings are regular polygons drawn with a single parameterized function, the black hole is layered radial gradients, and the background sky progressively reveals galaxy arms, nebulae, and auroras as players unlock technologies. Big moments like collapse and supernova are achieved with 60 particles and a screen shake. The approach yields automatic visual consistency, resolution independence, and zero asset pipeline overhead — turning a budget constraint into a coherent aesthetic identity. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How can I draw game shapes like circles, hexagons, and diamonds using HTML5 Canvas without image assets? Use a single polygon-drawing function that takes a center point, radius, and number of sides, then call it with different side counts for each shape: 4 sides rotated 45 degrees for a diamond, 6 for a hexagon, 3 for a triangle, 8 for an octagon. One routine walking points around a circle produces every regular shape, then fill and stroke with the color you want. _Developers exploring canvas-based rendering tricks like this can find similar practical breakdowns on daily.dev._ ### How do you create a black hole or glowing orb effect on HTML5 Canvas without a lighting engine or textures? Layer several translucent radial gradients on top of each other, fading from a bright or tinted color at the center to near-black at the edge, using createRadialGradient and multiple color stops. Adding a slow drift of particles spiraling inward completes the illusion of depth, since darkness around a glow makes it read as deep without any 3D rendering. _Anyone prototyping canvas visual effects can track more code-driven rendering techniques on daily.dev._ ## Similar posts on daily.dev - [Game Dev Without An Engine: The 2025/2026 Renaissance](https://daily.dev/posts/game-dev-without-an-engine-the-2025-2026-renaissance-pvy79vrpp) · SitePoint · 0 upvotes · 0 comments - [This Alien Has No Mesh & Is Built in Three.js with Shader Math](https://daily.dev/posts/this-alien-has-no-mesh-is-built-in-three-js-with-shader-math-qrbssssfa) · 80 LEVEL · 4 upvotes · 0 comments - [Creating 3D text engine in the browser](https://daily.dev/posts/creating-3d-text-engine-in-the-browser-9zfk5d8hf) · ITNEXT · 48 upvotes · 5 comments - [Hello, my name is Niels Leenheer](https://daily.dev/posts/hello-my-name-is-niels-leenheer-1kfzjqnuq) · Hacker News · 69 upvotes · 7 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#game-development](https://daily.dev/tags/game-development) [View this post on daily.dev](https://daily.dev/posts/part-4-i-can-t-draw-so-i-made-an-entire-game-s-art-out-of-math-instead-wbrfszexs) ```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":"Part 4: I Can’t Draw. So I Made an Entire Game’s Art Out of Math Instead","url":"https://daily.dev/posts/part-4-i-can-t-draw-so-i-made-an-entire-game-s-art-out-of-math-instead-wbrfszexs","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/part-4-i-can-t-draw-so-i-made-an-entire-game-s-art-out-of-math-instead-wbrfszexs"},"datePublished":"2026-07-21T18:06:19.745Z","dateModified":"2026-09-14T08:41:03.159Z","description":"A solo indie game developer explains how they built all visual art for their idle game 'Pure Idle' using only JavaScript and HTML5 Canvas math — no images, no...","image":"https://media.daily.dev/image/upload/s--0_ODbtD2--/f_auto/v1722860399/public/Placeholder%2008","thumbnailUrl":"https://media.daily.dev/image/upload/s--0_ODbtD2--/f_auto/v1722860399/public/Placeholder%2008","isAccessibleForFree":true,"articleSection":"Medium","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":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/part-4-i-can-t-draw-so-i-made-an-entire-game-s-art-out-of-math-instead-wbrfszexs","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,game-development","timeRequired":"PT9M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"Part 4: I Can’t Draw. So I Made an Entire Game’s Art Out of Math Instead"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/part-4-i-can-t-draw-so-i-made-an-entire-game-s-art-out-of-math-instead-wbrfszexs#faq","mainEntity":[{"@type":"Question","name":"How can I draw game shapes like circles, hexagons, and diamonds using HTML5 Canvas without image assets?","acceptedAnswer":{"@type":"Answer","text":"Use a single polygon-drawing function that takes a center point, radius, and number of sides, then call it with different side counts for each shape: 4 sides rotated 45 degrees for a diamond, 6 for a hexagon, 3 for a triangle, 8 for an octagon. One routine walking points around a circle produces every regular shape, then fill and stroke with the color you want. Developers exploring canvas-based rendering tricks like this can find similar practical breakdowns on daily.dev."}},{"@type":"Question","name":"How do you create a black hole or glowing orb effect on HTML5 Canvas without a lighting engine or textures?","acceptedAnswer":{"@type":"Answer","text":"Layer several translucent radial gradients on top of each other, fading from a bright or tinted color at the center to near-black at the edge, using createRadialGradient and multiple color stops. Adding a slow drift of particles spiraling inward completes the illusion of depth, since darkness around a glow makes it read as deep without any 3D rendering. Anyone prototyping canvas visual effects can track more code-driven rendering techniques on daily.dev."}}]} ```