Canvas

Pure javascript / HTML5 canvas bilinear image interpolation

This code is written to be easy to read, there’s plenty of room for optimization. First, the inner function call in the inner part of the two-levels pixel processing loop is probably a performance killer.
http://www.philou.ch/pic/fear_makes_the_wolf_look_bigger.jpg
http://www.philou.ch/playground.html

http://www.philou.ch/js-bilinear-interpolation.html

Core HTML5 Canvas

This is the companion website for Core HTML5, Volume I: Canvas, the first volume of the Core HTML5 series from Prentice-Hall. This book takes a code-fueled, no-nonsense, deep dive into one of HTML5's most exciting APIs by showing you how to:

• Draw and paint
• Apply shadows, patterns, and gradients
• Manipulate images
• Create animations
• Implement video games
• Develop custom controls
• Manipulate videos in realtime
• A bunch of other cool stuff

This website gives you access to the book's code, a free chapter, and live demonstrations of featured examples from the book.

http://www.corehtml5canvas.com/

gury

gury (pronounced "jury") is a JavaScript library designed to aid in the creation of HTML5/Canvas applications by providing an easy-to-use chain based interface.
With gury you can create a canvas tag, resize and style it, add renderable objects, animate those objects, and place it anywhere on the page in a single chained expression.

http://guryjs.org/

xc.js

xc.js is a framework for HTML Canvas games in Javascript. It's simple and fun to use and you can even try it out right here in your browser.
But that's not all. xc.js also runs on other platforms. You can write your games in Javascript and run them in all sorts of cool places (like on your phone!).

Try xc.js now!

You can download xc.js and run it on Windows, Linux, or OS X. Or, even better, try it out in your browser. Now that's cool.
Either way, be sure to check out the tutorials and documentation over at the wiki. There's other useful information there, too.

• Download   
• Try it Now!

Introducing node-canvas. Server side HTML5 canvas API

Today we open sourced our latest project, node-canvas, a canvas implementation for nodejs. The project is a work in progress, however  a large portion of the api is complete, including node-specific additions such as Canvas#toBuffer() and Canvas#createPNGStream().

Screencast GitHub

Examples

Shown below is the test suite running side by side with the browser implementation. node-canvas renders the left, and the browser (chrome) renders the canvas on the right using the same code.

Below is an example of chrome rendering flot on the left, and node-canvas on the right.

In the next few days we’re going to publish an article on why we decided to create it, how we’re leveraging it to power our reporting features for print stylesheets, old browsers and mobile compatibility.

http://www.learnboost.com/introducing-node-canvas-server-side-html5-canvas-api

jsplumb

This jQuery plugin provides a means for a developer to visually connect elements on their web page, in much the same way you might have seen on Yahoo Pipes. It uses Canvas in modern browsers, and Google's ExplorerCanvas script for stone-age browsers. Full transparent support for jQuery dragging is included, the API is super simple, and the compressed version of the script is just 11.6K.

You can see a demonstration here.
TweetPlumb is a great Twitter visualisation built using jsPlumb.

http://code.google.com/p/jsplumb/

Captcha cracking in JavaScript with Canvas and neural nets

Everybody’s favourite glass shield to protect web apps are CAPTCHAS. These are the distorted characters displayed on a page that a user has to enter before gaining access or sending off a form. They annoy normal users, are largely inaccessible to blind users or dyslexic people and are not that safe as we think they are. PWNtcha continually reports successful cracks of various captchas on the web using OCR algos and backend systems.

What is pretty amazing though is that now you can even crack the images using JavaScript and Canvas. ShaunF wrote a GreaseMonkey script that automatically solves captchas of the file hosting site Megaupload. There’s a demo of it available.

As John Resig explains in his analysis of the script there’s some pretty nifty work going on:

1. The HTML 5 Canvas getImageData API is used to get at the pixel data from the Captcha image. Canvas gives you the ability to embed an image into a canvas (from which you can later extract the pixel data back out again).
2. The script includes an implementation of a neural network, written in pure JavaScript.
3. The pixel data, extracted from the image using Canvas, is fed into the neural network in an attempt to divine the exact characters being used - in a sort of crude form of Optical Character Recognition (OCR).

True, Megaupload’s CAPTCHA is pretty basic, but it is still very impressive that you can use JavaScript to crack it. Seems like the getImageData API is something to have a closer look at.

http://ajaxian.com/archives/captcha-cracking-in-javascript-with-canvas-and-neural-nets