Sprucing up your images with HTML5

(and an intro to HTML5)

Ilmari Heikkinen

Google Chrome Developer Relations

ilmari@google.com

Who are you?

Ilmari Heikkinen

Dude who makes graphics demos

And writes articles about them

And gives the occasional talk

And helps third-party devs

Agenda

1. Talk a bit about HTML5
2. Show off the power of <canvas>

HTML5?

What is HTML5?

Quite a few things actually.

Brand

HTML5

Buzzword

All the new browser features

HTML5

W3C Specification

And a WHATWG Specification

Think STABLE and HEAD

Jump!

To html5rocks!

Demos!

In a nutshell

HTML5 makes web apps better

Onwards

To the second topic

Image filters

Filter images using <canvas>!

Image filters

It's actually pretty easy!

Image filters

And fun!

For some values of fun

How to do it

1. Get source ImageData
2. Create target ImageData
3. Fill target with filtered source
4. Draw target ImageData to canvas

getImageData

var ctx = canvas.getContext('2d');

ctx.drawImage(image, 0, 0);

var src = ctx.getImageData(

  0, 0, image.width, image.height

);

createImageData

var tgt = ctx.createImageData(width, height);

Fill target

for (var y=0; y<tgt.height; y++) {

 for (var x=0; x<tgt.width; x++) {

  var off = (y*tgt.width + x) * 4;

  var px = filter(src, x, y);

  tgt.pixels[off  ] = px.r;

  tgt.pixels[off+1] = px.g;

  tgt.pixels[off+2] = px.b;

  tgt.pixels[off+3] = px.a;

 }

}

Draw target

ctx.putImageData(tgt, 0, 0);

Demo!

Fancy filters with <canvas>!

Make it faster?

GPUs are built for this stuff.

WebGL lets us use GPUs.

Hmm...

WebGL how-to

1. Create a source texture from the image
2. Create a render target
3. Fill render target with filtered source
4. Draw render target to canvas

Sounds familiar

Same idea as with the 2D <canvas>

But a lot more boilerplate code.

Boilerplate, ughh

Use a library.

Then you only have to write the filters.

magi.js

var scene = new Magi.Scene(canvas);

var img = new Magi.ImageQuad(image);

scene.scene.appendChild(img);

var filter = new Magi.FilterQuad(shaderSource);

scene.postEffects.push(filter);

Demo!

WebGL filters!

Source

Let's see some filter code!

Conclusion

HTML5 improves web apps

Canvas: easy but slow

WebGL: easy but fast

(just... use a library)

Thank you

Ilmari Heikkinen

ilmari@google.com

P.S. you can get this slideshow app from

github.com/kig/magi