Drawing in the Browser

Canvas, WebGL, SVG, and CSS

Greg Tatum   /   gregtatum.com   /   @TatumCreative

You want to draw in the browser?

The State of Things

Rapid adoption of new drawing tools

HTML5 Whizbang

Remember Flash Sites?

SVG vs. Canvas

Canvas: 2d image

SVG: DOM and Event System

Canvas - 2d context

Bitmap image

Equivalent to a drawable image element

Limited events

DOM ignorant of what your canvas holds

2d context with simple commands

Decent performance

SVG - Scalar Vector Graphics

Graphics built on the DOM

CSS + XML

Full browser event system

All DOM interaction carries over

Slow with lots of elements and modification

WebGL

Rendered to a canvas

2d or 3d

Raw performance

Graphics card runs compiled shader code

Lots of potential complexity

HTML, CSS, & The DOM

Not the first thought for drawing

Divs are boxes that hold art

CSS transitions

Hardware acceleration

Example: 3d molecules

Example: 3d engine

Comparing the Technologies

You Want:

Easy drawing experiments

Canvas 2d

var ctx = canvas.getContext();

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);

Easy to outgrow and hit limitations

Canvas 2d Demos

Mine: Drawing Colorful Trees

Mine: Webcam Drawing

Mine: EvolveJS

You Want:

Data Visualization

SVG with D3.js

//Some D3.js code

d3.csv("data.csv", function() { ... });

var pie = d3.layout.pie()
    .value(function(d) { return d.population; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Gracefully display your data

D3.js Examples

Map Projection

Kepler's Planets

Wind Speed

Shuffle

You Want:

3d Demos

WebGL with Three.js

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

renderer.render(scene, camera);

Three.js handles the complexity of interacting with WebGL

Three.js Examples

Mine: Draw 3d Trees

Mine: Gravity Cloud

Mine: Carbon Dioxide Earth

Mine: Polar Space

Hackery, Math & Design

You Want:

A full 3d game engine

Unity3d - 5 (Coming Soon)

Write in UnityScript based off of JavaScript

Unity Web Player being replaced with WebGL (NPAPI going away)

You Want:

Blazing fast 2d speed

2d WebGL with pixi.js

var stage = new PIXI.Stage(0x66FF99);

var renderer = new PIXI.WebGLRenderer(400, 300);

requestAnimFrame( animate );

var texture = PIXI.Texture.fromImage("bunny.png");

var bunny = new PIXI.Sprite(texture);
bunny.position.x = 200;
bunny.position.y = 150;

stage.addChild(bunny);

function animate() {

    requestAnimFrame( animate );
    bunny.rotation += 0.1;
    renderer.render(stage);
	
}

pixi.js is fast!

pixi.js Examples

Bunny Benchmark

Mine: SVG vs. PIXI

Adventure Time

You Want:

Easy 2d video game creation

Phaser.js Game Engine

player = game.add.sprite(32, 32, 'dude');
game.physics.enable(player, Phaser.Physics.ARCADE);

player.body.bounce.y = 0.2;
player.body.collideWorldBounds = true;
player.body.setSize(20, 32, 5, 16);

player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('turn', [4], 20, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);

game.camera.follow(player);

cursors = game.input.keyboard.createCursorKeys();
jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

Flash game development is baaaack

Phaser.js Examples

Starstruck Example

Invaders

Mine: Revenant

You Want:

Interactive resolution independent graphics

Snap.svg

var s = Snap("#svg");

var bigCircle = s.circle(150, 150, 100);

bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});

var smallCircle = s.circle(100, 150, 70);

var discs = s.group(smallCircle, s.circle(200, 150, 70));

discs.attr({
    fill: "#fff"
});

Very direct drawing interface. Modern version of Raphael

Snap.svg Examples

Main Website

Animated game

Keep an eye out for new engines and frameworks

No Silos

Mix, match, and layer

Create really powerful combinations

Render the DOM on a 3d element

Build a 3d engine with CSS only

Combine with WebSockets, async calls, etc.

Thank You!