Tag Archives: canvas

Play with SVG Paths in Canvas with AndroidFillableLoaders

via Play with SVG Paths in Canvas with AndroidFillableLoaders · Jorge Castillo.

We usually don’t like the internal drawing logic from the Android SDK too much. When we read about it we use to feel weird, as it seems to be a little bit tedious. But it is not that hard if you read it carefully, and if you are capable of understanding it properly, you will end up creating really interesting figures and animations like the following one:

Add Image to HTML5 Canvas using JavaScript

via Add Image to HTML5 Canvas using JavaScript.

You can use JavaScript to add an image to an HTML5 Canvas element, dynamically. The <canvas> element is useful for drawing images, to create graphs, animations etc. Here, in this article I’ll show you two different methods on how to add an Image to the <canvas> element using JavaScript.

A collaborative drawing canvas with NodeJS and socket.io

via A collaborative drawing canvas with node.js and socket.io | Code-and.Coffee.

In this post I’ll explain how to build a very basic node.js server and client that receives lines drawn on a canvas in the browser and sends them to the other connected clients so everyone can see and scribble the same doodle.

An example of how to use the canvas clip function

via An example of how to use the HTML5 canvas clip function.

The clip function is a lesser known function that can be very useful when drawing on your canvas. You can create a path but not fill() or stroke() it and then use the clip() function so that any further drawing is restricted to that area. There’s a step-by-step example of using it below. One common use for it would be to achieve “inner shadows” – as in the circle shown below – meaning that you get a bevelled appearance.

Build a High-Performance Mobile App With Famo.us and ManifoldJS

via Build a High-Performance Mobile App With Famo.us and Manifold.js – Tuts+ Code Tutorial.

For the last few months I’ve been wanting to dive into this new JavaScript framework since I saw its launch event in October of 2014. Famo.us includes an open-source 3D layout engine fully integrated with a 3D physics animation engine that can render to DOM, Canvas, or WebGL. In short, you can get native performance out of a web application, largely due to the way Famo.us handles the rendering of its content.

Jenn Simmons of the Web Platform Podcast recently had Famo.us CEO, Steve Newcomb on the podcast to discuss the mobile performance and their upcoming mixed mode. This was perfect timing, as Microsoft had just released ManifoldJS, a tool which allows you to package your web experience as native apps across Android, iOS, and Windows. I wanted to put these two technologies to the test.

In short, I wanted to determine if Famo.us does actually have great mobile performance, as well as have an understanding of how straightforward the process was for packaging my web application as a mobile app.

Creating PIXI.js filters using WebGL

via Creating PIXI.js filters using WebGL | Tizen Developers.

PIXI.js 3.0 is a great library for creating 2D canvas games and animations. It’s one of the most used canvas renderers over the Web. It also supports WebGL rendering, thanks to which most of the operations are executed by GPU instead of CPU. It comes with a nice filters feature that has great possibilites and is quite easy to use and extend. In this article we will focus on describing how to create a custom filter using Fragment shaders.

Video: NodeJS Reds full text search Texty canvas text editing and Super Agent ajax request lib

Introduction to the redis node.js full-text search library Reds, pure-canvas text editing library Texty, and the elegant Ajax API Super Agent.