InventionsThe Canvas API on Safari is broken

The Canvas API on Safari is broken

-

- Advertisment -

Your using the HTML Canvas Element in your new web app and decide to quickly test on iOS Safari. Suddenly your canvas isn’t drawn and the console shows a yellow warning “Total canvas memory use exceeds the maximum limit”. What gives?

While you were busy building, Safari was busy stuffing itself.

Safari has a thing for hoarding elements. When you’re done with a canvas, Safari will hold on to it for a while, even if you’re not referencing it.

It has a cute little showcase where it presents all the canvas elements it’s currently holding on to.

A grid layout showing canvas contents previews, canvas sizes, and the memory size of each canvas

- Advertisement -

That’s. Just. Great.

Safari on iOS has the same hobby. It desperatly wants to keep up with its big brother on MacOs but it just doesn’t have the same storage capacity.

Once the storage box is full, it’ll throw this message and start drawing transparent canvas elements.

Total canvas memory use exceeds the maximum limit

So how do we deal with this?

- Advertisement -

We’re going to have to help out Safari to clean up its mess. Get rid of the things it can’t or won’t throw away.

When we’re done with a element we have to manually “release” it.

Meaning we resize the canvas to a very small size and clear its contents, this tricks Safari in to replacing the canvas in its storage with our compressed version.

The following function will do just that.

function releaseCanvas(canvas) {
  canvas.width = 1;
  canvas.height = 1;
  const ctx = canvas.getContext("2d");
  ctx && ctx.clearRect(0, 0, 1, 1);
}
- Advertisement -

Safari will still hold on to the for a while, but at least now it won’t blow the roof of its storage depot.

Unfortunately the memory limit on iOS Safari is rather low. It’s limited to 384MB on version 15, it’s lower on earlier versions, and it’s probably device specific as well.

A canvas pixel is made up of 4 values, red, green, blue, and an alpha value. Combining this with the canvas size we can calculate the amount of memory a canvas requires.

4096 × 4096 × 4 = 67108864 Bytes = 64 Megabytes

This is also the max size of a canvas on Safari

Let’s exceed the 384MB limit by creating 8 of these canvas elements.

for (let i = 0; i < 8

NOW WITH OVER +8500 USERS. people can Join Knowasiak for free. Sign up on Knowasiak.com
Read More

- Advertisement -
Ava avatar
Avahttps://facebook.com/avamax
I'm a researcher at Utokyo :) and a big fan of Ava Max

You might also likeRELATED
Recommended to you

Ten years of expertise, tranquil failing cell phone monitors

I fail phone screens pretty often, which limits my job prospects and is embarrassing for someone with ten years of industry experience, a pretty extensive Github account and a publicly available list of difference-making projects. 1 In theory a phone screen is supposed to evaluate whether a) this person would be good at the job…

Bulgaria’s original eGov minister is a software program engineer

Something went wrong, but don’t fret — let’s give it another shot.

My friends Instagram was hacked and deep-fake videos posted in less than 6 hours

Today has been wild. I am quite shocked at how quickly the whole thing happened and how difficult it...

The Fifth Age of Oil

December 12, 2021 Recent Articles: Does QE Cause Wealth Inequality? Proof-of-Stake and Stablecoins: A Blockchain Centralization Dilemma Swan Bitcoin Review This newsletter examines the history and current state of the global oil market, and makes the case for decent performance from oil and gas stocks during the 2020s decade. It’s not a trading call, in…
- Advertisement -

My self-hosting infrastructure, fully automated

This project utilizes Infrastructure as Code to automate provisioning, operating, and updating self-hosted services in my homelab. It can be used as a highly customizable framework to build your own homelab. Feel free to join me on my Matrix chat server at chat.khuedoan.com, or #homelab:matrix.khuedoan.com if you already have a Matrix client. Please note that…

SUSE announces Liberty Linux, new distro for those who miss the old CentOS

Official details remain scant, but SUSE Liberty Linux is a new member of the growing tribe of CentOS Linux replacements. The offering seems to be a SUSE rebuild of CentOS 8, aimed at near-perfect RHEL 8 compatibility. Since Red Hat killed off CentOS Linux and replaced it with CentOS Stream, there's been renewed activity in…

Must read

Party like a Sumerian: reinterpreting the ‘sceptres’ from the Maikop kurgan

Introduction In summer 1897, Professor Nikolai Veselovsky of...

Level to HN: Universalasync – ticket sync and async libraries on the identical time

A library to help automate the creation of universal python libraries Overview Have you ever been frustrated that you need to maintain both sync and async versions of your library, even thought their code differs by just async and await? You might have came up to rewriting your code before release or other unreliable solutions.…
- Advertisement -