Tag Archives: canvas

Rough.js – Create SVGs with a hand-drawn, sketchy, appearance

Rough.js is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. To get started … Continue reading

Elsewhere , , Leave a comment

How Reddit built r/Place

Each year for April Fools’, rather than a prank, we like to create a project that explores the way that humans interact at large scales. This year we came up with Place, a collaborative canvas on which a single user … Continue reading

Elsewhere , , , , Leave a comment

Copycat JavaScript Game

Fun little game in which you control more than one character at once in a level, all bound to the same controls. Using walls and other obstacles you can sync up the locations between characters in order for each character … Continue reading

Elsewhere , , , , Leave a comment

JavaScript Confetti Cannon

Built using GSAP and its Physics2D Plugin

Elsewhere , , , , Leave a comment

Instagram-style filters in HTML5 Canvas

Whilst the embedded Codepen demos aren’t working for me, the standalone demo is. Instagram-style filters in HTML5 Canvas → Related: CSSGram →

Elsewhere , , , , Leave a comment

Flipboard Engineering: 60fps on the mobile web

Since earlier this week Flipboard now is a website too. As they wanted to mimic their mobile apps, it would sport lots of animations. During their first tests, they found the DOM being too slow (although that’s not entirely true, … Continue reading

Elsewhere , , Leave a comment

Realtime Audio-Visualizations with JavaScript

window.onload = function() { var ctx = new AudioContext(); var audio = document.getElementById(‘myAudio’); var audioSrc = ctx.createMediaElementSource(audio); var analyser = ctx.createAnalyser(); // we have to connect the MediaElementSource with the analyser audioSrc.connect(analyser); // we could configure the analyser: e.g. analyser.fftSize … Continue reading

Elsewhere , , , Leave a comment

Isomer – An isometric graphics library for HTML5 canvas

var Shape = Isomer.Shape; var Point = Isomer.Point; iso.add([ Shape.Prism(Point.ORIGIN, 3, 3, 1), Shape.Pyramid(new Point(0, 0, 1)), Shape.Pyramid(new Point(0, 2, 1)), Shape.Pyramid(new Point(2, 0, 1)), Shape.Pyramid(new Point(2, 2, 1)) ]); Did somebody out there recreate Monument Valley using this yet? … Continue reading

Elsewhere , , , Leave a comment

Earth Wind Map

An animated map of global wind conditions Uses real weather data. Built on top of d3.js. Click on the word earth to change height, projection, etc. Changing height allows you to see the Jet Stream. Earth Wind Map →

Elsewhere , , Leave a comment

Export Flash Pro CC to HTML5 Canvas

With its latest update, Flash Professional CC empowers the open web ecosystem by providing native support for HTML5. You can now natively author and publish HTML5 Canvas content from within Flash Pro. Powered by CreateJS. Also comes with a AS3 … Continue reading

Elsewhere , , , , 1 Comment