Tags: canvas

45

sparkline

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

Meet the Online Tracking Device That is Virtually Impossible to Block - ProPublica

Well, thanks to the ass-hattery of AddThis, the use case of your site’s visitors switching off JavaScript for (legitimate) security reasons just became a lot more plausible.

But you’re using JavaScript as an enhancement, right? You’re not relying on it for core tasks, right?

Introducing drawpath - Josh Emerson

A lovely little from Josh that allows you to draw shapes in a canvas element and then copy the resulting code.

Implementing off-canvas navigation for a responsive website by David Bushell

This off-canvas demo is a great practical example of progressive enhancement from David. It’s also a lesson in why over-reliance on jQuery can sometimes be problematic.

LukeW | Off Canvas Multi-Device Layouts

Luke and Jason have put together some demos of various “off-canvas” navigation patterns for responsive designs.

Elite - Cobra Mk III

Rendered in canvas by the reverend Dan Catt. Now I really want to play Elite.

The Convergence

A fun platform game with a twist.

Upperdog Labs: Video Canvas Responsive Design - YouTube

I never expected to see a cross between responsive design and AR, but here ya go:

A silly mashup of HTML5 technologies: We use the canvas to capture the contents of a video element. The canvas then identifies the blue markers and overlays an iframe on top of it. The iframe contains our website (upperdog.se) which has a responsive design.

Upperdog Labs: Video+Canvas+Responsive Design