DEV Community

Cover image for Trying to Replace the DOM with Canvas — And Failing
Manuel Artero Anguita 🟨
Manuel Artero Anguita 🟨

Posted on

5 1 2 1

Trying to Replace the DOM with Canvas — And Failing

I’ve been three weeks in the desert

Bob Sponge in a desert

We build apps that run on an embedded system with less RAM than a Raspberry Pi, rendering on a TV.

To improve performance, another team built a POC replacing standard DOM elements with a canvas managed by a library called pixi.js. The idea was to boost rendering speed.

pixi.js cover

Meanwhile, product and design prepared a new app to launch this month — a kind of Amazon for products: a grid where you can click and buy. A test to see if we could build more store-specific apps.

Since we had time ahead, we decided I’d take care of this grid, drawing everything directly on canvas — rectangles, lines, all raw. My teammate had already experimented with this library, but I jumped in so this tech wouldn’t become a black box in the project.


Three weeks later, I’ve failed.


It’s hit me hard.
My confidence is shattered.

Impostor syndrome is hitting harder than ever since I’m supposed to be the senior here.


Every time I’ve faced something new in my career, I’ve leaned on the community: StackOverflow, GitHub Discussions, public issues

Always found experienced people willing to help.

github discussion menu screenshot

This time, nothing. No answers, barely any docs, few examples.

I ended up cloning the repo trying to figure things out from the inside, but it was way beyond what I could handle.
Shaders? Graphics contexts?

It’s a completely different world and I feel totally alone. And the clock keeps ticking ⏲️


I was honest with my manager today:

- “This thing defeated me. I’m stuck, I feel like I’ve failed.”

He told me to breathe, focus on other tasks for now, and we’ll try again next week.


I know the theory (despite didnt apply it) So if you’re reading this:

  • Don’t isolate yourself in the learning process. Pair up early, even if just to explore the unknown together.
  • Be brutally honest with yourself and your team earlier, not after weeks of suffering.
  • Learning a new paradigm takes time. Graphics programming is not "just another JS lib" — it’s a different mindset.
  • Protect your confidence. You’re not less skilled because you hit a wall. You’re just in unfamiliar terrain.
  • Even seniors need maps sometimes.

Anyway, that’s where I am today.

thanks for reading.

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

Top comments (5)

Collapse
 
benny00100 profile image
Benny Schuetz

Yep - I think a lot of programmers know such feelings and situations. So, heads up.

And your manager seems to be a good guy.

I personally find myself running in the woods and also taking a step back. Often this helps to get another perspective on the challenges I am facing.

Concerning the technical part of your project.

Some years ago I also did some research for 2D rendering for embedded PCs with limited power. It turns out that the normal 2D-canvas API was quite fast (its hardware accelerated by default).

For another component (2D-Chart) I successfully used pure WebGL with VanillaJS.

Collapse
 
manuartero profile image
Manuel Artero Anguita 🟨

i think that the library in the middle (pixi.js) is doing more harm than good at this moment

Collapse
 
benny00100 profile image
Benny Schuetz

Yep. I used PIXI quite a lot for game development. It's a great library.

But in your scenario it might be too bloated. As I said before I was really surprised by the performance of the simple 2D canvas context. Maybe that's worth looking into.

Collapse
 
maikthomas profile image
Mike Thomas

100% I went down a webGL path recently and had a similar experience!

Collapse
 
manuartero profile image
Manuel Artero Anguita 🟨

EY! Mike!! happy to see you here.
thanks for commenting :)

Playwright CLI Flags Tutorial

5 Playwright CLI Flags That Will Transform Your Testing Workflow

  • 0:56 --last-failed: Zero in on just the tests that failed in your previous run
  • 2:34 --only-changed: Test only the spec files you've modified in git
  • 4:27 --repeat-each: Run tests multiple times to catch flaky behavior before it reaches production
  • 5:15 --forbid-only: Prevent accidental test.only commits from breaking your CI pipeline
  • 5:51 --ui --headed --workers 1: Debug visually with browser windows and sequential test execution

Learn how these powerful command-line options can save you time, strengthen your test suite, and streamline your Playwright testing experience. Click on any timestamp above to jump directly to that section in the tutorial!

Watch Full Video 📹️

👋 Kindness is contagious

If you found this article helpful, please give a ❤️ or share a friendly comment!

Got it