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 to reach its own target. The game itself is written in “vanillaJS”, sans external libraries, …
Tag Archives: canvas
JavaScript Confetti Cannon
Instagram-style filters in HTML5 Canvas
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, see this video and its description for example). And then, an epiphany: Most modern mobile …
Continue reading “Flipboard Engineering: 60fps on the mobile web”
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 (for further infos read the spec) // frequencyBinCount tells you how many values you’ll receive …
Continue reading “Realtime Audio-Visualizations with JavaScript”
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? Isomer →
Earth Wind Map
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 to JS converter. Adobe Flash CC: What’s New → Flash Professional Help: Creating and publishing …
Image masking using canvas
All you need to do is add the canvasmask.js script and add a class of mask to each image you want to mask. You also need to provide a PNG file as the mask using the data-mask attribute. <img src="red-panda.jpg" alt="Red panda" class="mask" data-mask="centerblur.png"> Canvas Masking Demo → Canvas Masking Source →