Guymon

Bildeffekte mit Canvas

Zwei interessante Canvas Bibliotheken sind mir heute über den Weg gelaufen. Da ist zum einen PaintbrushJS

PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page.

You use it by applying a class to an element on the page and setting a few parameters with some extra HTML attributes. If the element is an img or it has a background-image set in your CSS, PaintbrushJS will create a temporary canvas element and manipulate the image there, before finally saving it back out to the original element.

und zum anderen CamanJS

The main focus of CamanJS is manipulating images using the HTML5 canvas and Javascript. It’s a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques. It is also completely library independent and can be safely used next to jQuery, YUI, Scriptaculous, MooTools, etc.

CamanJS is very easy to extend with new filters and plugins, and it comes with a wide array of image editing functionality, which is only growing as the community makes more plugins. It has a powerful layering system, much like the one present in Photoshop and GIMP, that makes the sky the limit for your creativity.

Optimize Images with Canvas

Ein interessanter Artikel im smashingmagazine beschäftigt sich mit der Möglichkeit einige Bildmanipulationen clientseitig auszuführen um Bildgrößen gering zu halten.

Da man über das Canvas Element auf jedes Pixel eines Bildes zugreifen kann lassen sich einige nette Sachen machen.

Sehr nett, allerdings sollte man sich die Warnung zu Herzen nehmen:

But use this technique wisely. Putting many unoptimized image generators on a single page could cause the browser to hang for a few seconds. You shouldn’t use this technique if you don’t really understand how it works or know what you’re doing. Always prioritize performance ahead of cool technology.

Cavas Links

Das .net Magazine erklärt wie man einen Page Flip Effect mit Canvas nachbaut.

This tutorial will take you through the process of creating your own page flip effect using the canvas element and plenty of JavaScript. Some of the rudimentary code, such as variable declarations and event listener subscription, has been left out of the snippets in this article, so remember to reference the tutorials files for the complete code.

Der Effekt ist nett, aber ich finde immer noch, dass man dafür zuviel Code schreiben muss. Trotzdem noch ein Canvas Link: Paper.js.

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

Shutter Effect for Photos

Einen sehr schicken Foto Effekt demonstriert Martin Angelov .

In today’s tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

Sehr cooler Effekt.

daily links

• Olark | Features
  Chat with visitors on your website from your desktop, your laptop, your iPhone, or your Blackberry. We work with standard chat (IM) clients (like iChat, Pidgin, and Meebo) and services (Google Talk and Jabber) which means YOU get to decide what software to use.
• HTML5 Canvas Graphing Solutions Every Web Developers Must Know | Web Designer Aid
  For today’s post we’ve collected amazing library, demos and experiments that uses HTML5 canvas element that produces a charting and graphing solutions. We also added links for further readings and a step by step HTML5 tutorials on creating charts and graphs.
• atMonitor
  atMonitor is the most advanced monitoring tool for Mac OS X that displays system activity in real-time. It is designed to allow quick assessment of computer’s state and it is powerful enough to make it a core utility in anyone’s system troubleshooting toolkit.