Adactio: Links—Tagged with canvas

Google Workspace Updates: Google Docs will now use canvas based rendering: this may impact some Chrome extensions

Yikes!

We’re updating the way Google Docs renders documents. Over the course of the next several months, we’ll be migrating the underlying technical implementation of Docs from the current HTML-based rendering approach to a canvas-based approach to improve performance and improve consistency in how content appears across different platforms.

I’ll be very interested to see how they handle the accessibility of this move.

You are not connected to the Internet

This is a very cute offline page. Ali Spittel has written up how it was made too.

Zdog · Round, flat, designer-friendly pseudo-3D engine for canvas and SVG

Impressively lightweight and smooth!

How to build a simple Camera component - Frontend News #4

A step-by-step guide to wrapping up a self-contained bit of functionality (a camera, in this case) into a web component.

Mind you, it would be nice if there were some thought given to fallbacks, like say:

<simple-camera>
<input type="file" accept="image/*">
</simple-camera>

Solving Sol

Browser implementations of Sol LeWitt’s conceptual and minimal art, many of which only exist as instructions like this:

Vertical lines, not straight, not touching, covering the wall evenly.

Generative Artistry

Tutorials for recreating classics of generative art with JavaScript and canvas.

Geometry Wars

Graham is recreating the (beautiful and addictive) Geometry Wars in canvas.

Best played with a twin-stick controller (or WASD + Arrow keys as a fallback)

If you’re on Windows, XBONE or XB360 controllers are the easiest to use. On Mac, a PS4 Dualshock 4 or wired 360 controller (with a downloadable driver) works well.

Constellations

A fun game with pins and string in canvas.

Dwitter

A social network for snippets of JavaScript effects in canvas, written in 140 characters or fewer. Impressive!

Constellation charts

Refresh to get a new randomly generated constellation.

A lovely bit of creative JS from Emily

Fluid Paint

The texture here is shockingly realistic.

CanvasSwirl: An animated spirograph experiment in JavaScript and canvas by xhva.net

But, like, have you have ever really looked at your hand?

cursory hack

Sorcery!

(well technically, JavaScript + canvas, but y’know, to-may-to, to-mah-to)

Global Defense

Dave is making a nifty in-browser game that you can play by yourself or in co-operative mode. If your device has a gyroscope, you can use that to aim. Very cool!

(And it looks like it’s all set to become a progressive web app once it’s running on HTTPS.)

Instagram-style filters in HTML5 Canvas | Viget

Una’s [Instagram filters in CSS}(https://github.com/una/CSSgram) are great, but the browser support for CSS filters isn’t as good as, say, the browser support for canvas. Here’s a clever bit of scripting to polyfill filters using canvas.

Interactive Storytelling | Codrops

I think this might be the most tasteful, least intrusive use of scroll events to enhance a Snowfallesque story. It’s executed superbly.

You can read all about the code. Interestingly, it’s using canvas to render the maps even though the maps themselves are being stored as SVG.

(There’s a caveat saying: “This is a highly experimental project and it might not work in all browsers. Currently there is no IE support.” I don’t think that’s true: the story works just in IE …that browser just doesn’t get the mapping enhancements.)

Link tags: canvas

48