DEV Community

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

Posted on

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.

Top comments (7)

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
 
kaliedarik profile image
Rik Roots

I'm intrigued by the investigation that led to your colleagues choosing to use Pixi.js - there's lots of canvas libraries out there, each with their own strengths and weaknesses. Pixi - which relies on the device supporting WebGL/WebGPU canvases - may not have been the best fit for your particular requirements in this situation.

If you ever find yourself in this situation again, maybe try a different library - for instance Scrawl-canvas.

Collapse
 
manuartero profile image
Manuel Artero Anguita 🟨

classic org chart politics: 'Hey, the XXX team is already killing it with WebGL using this library... why aren't you guys on board yet? you may be falling behind'

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 :)