Archive for the 'Canvas' Category

Design 3D Models in a Browser

Perfect for a Monday is a cool 3D model editor built using the Canvas tag and created by Jayesh Salvi:

View Source Tutorial: Content Site Using HTML5 Canvas + CSS3

Via Phil Franks comes an interesting HTML5/CSS3 site for There Studio, which is a kind of coworking space in London:

The site itself has a number of circles with information bouncing on the screen that respond to mouse clicks and moves.
Let’s crack th…

Real World Canvas Tips from Hakim El Hattab

From Hakim El Hattab (who has some very nifty HTML5 experiments up) comes some nice tips on using the Canvas tag:

Cross browser implementation
There are no real discrepancies between the canvas outputs of different browsers so long as the JavaScript code is written correctly (if not, browsers tend to try and fix things for you, [...]

Want to pack JS and CSS really well? Convert it to a PNG and unpack it via Canvas

Jacob Seidelin of nihilogic fame (remember his Super Mario in JavaScript solution) is one of my unsung heroes of JavaScript. His solutions have that Dean Edwards “genius bordering on the bat-sh*t-crazy” touch that make you shake your head in disbelief when they come out but later on become very interesting.
One of his posts from [...]

JavaScript Gameboy Emulator: Memory and GPU

Jack Vaughn posted on Ajaxian recently about a new blog series on building a Gameboy emulator using JavaScript. Now Parts II and III have been posted in the series:

Part 1: The CPU
Part 2: Memory
Part 3: GPU Timings

In the Memory section, Imran Nazar builds up a JavaScript MMU that can interpret the different parts of the [...]

Canto.js: An Improved Canvas API

Javascript author extraordinaire David Flanagan released Canto.js recently, a lightweight wrapper API for canvas, introduced here and documented at the top of the source code. Example:
PLAIN TEXT
JAVASCRIPT:

canto(”canvas_id”).moveTo(100,100).lineTo(200,200,100,200).closePath().stroke();
 

Notice three things:

canto() returns an abstraction of the canvas - a “Canto” object.

As with jQuery and similar libraries, there’s method chaining; each method called on a Canto [...]

Canvas Color Cycling

Interest in Canvas, as well as mobile apps, has led to a renaissance of old-school 8-bit graphics. Joe Huckaby of Effect Games has been playing around with color cycling, leading to some stunning effects.

Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to [...]

IE9 supports Canvas…. hardware accelerated!

Huge news. My canvas crusade is done. IE9 is supporting canvas, and it is hardware accelerated, in the third preview release:

With the third platform preview, we introduce support for the HTML5 Canvas element. As you know our approach for standards support is informed both by developer feedback and real word usage patterns today, along with [...]

Liquid Particles

Sit back and enjoy:

The bulk of the code is just:
PLAIN TEXT
JAVASCRIPT:

function run()
{
        ctx.globalCompositeOperation = “source-over”;
        ctx.fillStyle = “rgba(8,8,12,.65)”;
        ctx.fillRect( 0 , 0 , canvasW , canvasH );
        ctx.globalCompositeOperation = “lighter”;
       
        mouseVX    = mouseX - prevMouseX;
  [...]

Canvas optimization tip: Get image data as infrequently as possible

We have learned to touch the DOM as little as possible for performance sakes. Batch up changes, and do one call to innerHTML say. Talk over the evil boundary of the DOM as infrequently as possible.
Well, Selim Arsever has found a similar tip for Canvas that caused a ~40% performance improvement on some of his [...]