Alexander Myshov

Non-blocking cross-browser image rendering on the canvas Canvas-based rendering has become a prominent tool for building complex web UI interfaces. When working with large images on canvas, one critical challenge stands out: keeping the main thread responsive during image decoding. Unfortunately there’s no universal way to decode an image for canvas' dra

Non-Blocking Cross-Browser Image Rendering on the Canvas, by @myshov.bsky.social:

https://calendar.perfplanet.com/2025/non-blocking-image-canvas/

#canvas #javascript #images #performance

@stoyan.me thank you for posting the article!

TrySound - Overview Building open source web apps full time. TrySound has 204 repositories available. Follow their code on GitHub.

I’m available for hire. If you are looking to build web app with real-time collaboration or a tricky frontend, DM me.

github.com/TrySound

history-of-javascript/4_evolution_of_js_modularity at master · myshov/history-of-javascript Project "History of JavaScript". Contribute to myshov/history-of-javascript development by creating an account on GitHub.

The evolution of JavaScript modularity (from 2018)
@myshov.bsky.social
github.com/myshov/histo...

#ECMAScript #JavaScript

Hi! Do you happen to have any slots for articles open? I am currently working on the article about image decoding on the web but won’t be able to finish it before December 1st

Hi Barry, thanks for the quick response! Sure I will post my findings 👍

Ping @tunetheweb.com @jakearchibald.com

Ping @firefoxperformance.bsky.social

GitHub - myshov/fastDrawImage: Non-blocking example of drawImage on html5 canvas Non-blocking example of drawImage on html5 canvas. Contribute to myshov/fastDrawImage development by creating an account on GitHub.

The final workaround that I came up with is to use combination of these two methods. `.decode()` for Firefox and Safari and `createImageBitmap` for Chrome. Here is the repo with more info and examples github.com/myshov/fastD... I hope it will help browser vendors to resolve problems

One method that works for decoding in Chrome without blocking it is using `createImageBitmap()` with blob as an argument. But unfortunately it doesn’t work well in Firefox

If you think that `image.decode()` should execute off main thread and it should help, you are right. But in Chrome drawImage alwaysh trigger additional decoding even for images that were decoded before

I have spent the whole weekend trying to figure out how to use `canvas.drawImage()` without blocking the main thread. It turned out there is no reliable cross-browsing solution due to issues in browser implementations.

Something wrong with git-wrapped.com. I have too many stars

Oh… 🙈

My humor from work chat:

Just in time! We about to migrate our app from esbuild to vite, it will be fun jump straight to v.6 🙂 Congrats to the vite team!

A flag which bans TS features with runtime emit (enums, namespaces, experimental decorators, etc) will come in 5.8 to help people executing TS code via Node.js (or who want to avoid using those features for "reasons").

Really cool demo! Probably this idea can also be applied to a text to create interesting wavy effect on hover

But on serious note I have seen that people use api from twitter to extract text of the tweets on statically generated sites. It’s not perfect solution but it can solve the problem with removed tweets

Screenshots will save the web

Iconik on the Horizon - New feature preview 2024 - media asset management with AI and automation YouTube video by Iconik

Currently I am working at Backlight on iconik. It’s a media asset management system that used by movie studios and news broadcasters. And this particular feature is my child for the last half a year youtu.be/w9Fs6octebU?...

Just disabled 1Password autocompletion with `data-1p-ignore` for all inputs that have `autocomplete=“off”` in the app that I am working on. Best decision so far 🙂

Hello world! 👋