Browsers are really fast these days, but a common misconception is that browsers are too slow for fast graphics (this isn't true). What most people mean by that is that the language used in the browser, JavaScript, can be slower than other (native) languages, which is true. But drawing graphics is typically not dependent on JavaScript at all. Even though JavaScript might tell the browser to draw something, the actual drawing is completely native and extremely optimized. Drawing is what the browser does all day, and it's extremely good at it. That's why Framer canvas uses the browser directly for graphics rendering, compared to other tools that build on CoreGraphics, WebGL, or a custom graphics toolkit.

A huge advantage from using the DOM for drawing is that it can do everything, from GPU accelerated graphics, to platform native font rendering, to advanced filters, to animations and videos. It’s a marvel of engineering to optimize for all of those at the same time. Plus it’s truly WYSIWYG, because you’re drawing it where others will see it. For example, under the hood Chrome actually uses Skia, which in its turn uses OpenGL (or even the modern even faster Vulkan or Metal backends), probably the fastest and most versatile graphics toolkit on the planet. If you are using Chrome, you can find your current graphics acceleration settings under chrome://gpu/.

When we say fast, what do we really mean?

When we talk about a fast canvas or fast computer in general, there are three parts that we mean. First, the time it takes things to load. For example, the time it takes for the app to load or for a specific page or document to load before you can see it and start working. Second, the time it takes to draw (every frame), determining how smooth scrolling and animations are. And finally, the time it takes something to respond to your actions, in other words, the latency or lag you feel—or don’t feel.

Just like the makers of any other tool, we use these measurements to assess Framer’s performance.