![Page 1: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/1.jpg)
HTML5Huh, What is it good for?
![Page 2: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/2.jpg)
Remy Sharp@rem
I wrote a book on it :)
![Page 3: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/3.jpg)
๏HTML๏New HTML5 elements
๏Buzzword๏Simple doctype
It's more than
![Page 4: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/4.jpg)
JavaScript๏Offline
๏App cache
๏WebStorage
๏WebSQL
๏IndexedDB
๏Multimedia
๏Video & Audio
๏2D Canvas
![Page 5: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/5.jpg)
JavaScript๏X-domain messaging
๏CORS
๏File API
๏Drag & Drop
๏History API
๏Lots, lots more.
![Page 6: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/6.jpg)
JavaScript๏Canvas API
๏Offline apps
๏Web Sockets
![Page 7: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/7.jpg)
When can I use "HTML5"?
![Page 8: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/8.jpg)
![Page 9: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/9.jpg)
![Page 10: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/10.jpg)
![Page 11: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/11.jpg)
![Page 12: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/12.jpg)
Making it work in the "other" browser
![Page 13: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/13.jpg)
Polyfillswill/might save youA shim that mimics a futureAPI providing a fallback to
older browsershttp://goo.gl/0Z9eI
![Page 14: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/14.jpg)
Oh, and learn JavaScript
![Page 15: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/15.jpg)
CanvasHan Solo of HTM
L5
![Page 16: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/16.jpg)
Canvas SVG
![Page 17: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/17.jpg)
๏It's not one is better than the other, they do different things
๏Select canvas when it makes sense
๏Don't assume interactive means canvas
๏Check out raphaeljs.com
![Page 18: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/18.jpg)
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Canvas</title></head><body> <canvas></canvas></body></html>
![Page 19: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/19.jpg)
2D APIctx = canvas.getContext('2d')
![Page 20: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/20.jpg)
![Page 21: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/21.jpg)
๏Gradients๏Pixel manipulation๏Paths๏Shadows๏Export to data url๏State saving
![Page 22: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/22.jpg)
var rainbox = ctx.createLinearGradient(0, 0, w, h), colours = { 0: 'red', 0.167: 'orange', 0.333: 'yellow', // etc };
for (var key in colours) { rainbow.addColorStop(key, colours[key]);}
ctx.fillStyle = rainbox;ctx.fillRect(0, 0, w, h);
Gradients
![Page 23: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/23.jpg)
var pixels = ctx.getImageData(0, 0, w, h), len = pixels.data.length;
for (var i = 0; i < len; i += 4) { var rgb = 'rgb(' + // ↵ [ pixels.data[i], // red pixels.data[i+1], // green pixels.data[i+2] // blue ].join(',') + ')';}
Pixel Pushing
![Page 24: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/24.jpg)
var pinsize = 26, pinedge = pinsize * 0.1, centre = pinsize/2, radius = centre - pinedge, circle = Math.PI * 2;
pinctx.beginPath();pinctx.arc(centre, centre, // ↵ radius, 0, circle, true);pinctx.closePath();pinctx.fill();
Paths
![Page 25: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/25.jpg)
TipMath.PI == 180°
![Page 26: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/26.jpg)
Math.PI * 2 == 360°
Tip
![Page 27: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/27.jpg)
d * Math.PI / 180 == radian
Tip
![Page 28: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/28.jpg)
pinctx.shadowBlur = 2;pinctx.shadowOffsetX = 2;pinctx.shadowOffsetY = 2;pinctx.shadowColor = 'rgba(0,0,0,.7)';
Shadows
![Page 29: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/29.jpg)
pinctx.canvas.toDataURL('image/png')
Export
data:image/png;base64,...
![Page 30: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/30.jpg)
Tipcontext.canvas
All context contain back-reference to it's canvas
![Page 31: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/31.jpg)
pinctx.fillStyle = '#fff';pinctx.save();pinctx.fillStyle = '#f00';// do somethingpinctx.restore();// now fillStyle is #fff
State Saving
![Page 32: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/32.jpg)
Offline Applications
![Page 33: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/33.jpg)
Using a Manifest<!DOCTYPE html><html manifest="my.appcache"><body><!-- my page --></body></html>
![Page 34: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/34.jpg)
CACHE MANIFESTapp.htmlcss/style.cssjs/app.js#version 13
my.appcache
![Page 35: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/35.jpg)
The Manifest
1. Serve as text/manifest, by adding to mime.types:
text/cache-manifest appcache
![Page 36: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/36.jpg)
<IfModule mod_expires.c> ExpiresActive on ExpiresByType text/cache-manifest ↪ “access plus 0 seconds”</IfModule>
Firefox caching
![Page 37: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/37.jpg)
The Manifest
2. First line must be:
CACHE MANIFEST
![Page 38: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/38.jpg)
The Manifest
3. Including page is implicitly included in the cache.
![Page 39: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/39.jpg)
The Manifest
4. Two futher namespaces: NETWORK & FALLBACK
![Page 40: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/40.jpg)
CACHE MANIFEST
CACHE:app.jsapp.cssindex.html
NETWORK:http://*https://*
FALLBACK:/ offline.html
![Page 41: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/41.jpg)
CACHE MANIFEST
CACHE:app.jsapp.cssindex.html
NETWORK:http://*https://*
FALLBACK:/ offline.html
What to cache
![Page 42: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/42.jpg)
CACHE MANIFEST
CACHE:app.jsapp.cssindex.html
NETWORK:http://*https://*
FALLBACK:/ offline.html
App cache requires all resources are accounted for.
![Page 43: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/43.jpg)
CACHE MANIFEST
CACHE:app.jsapp.cssindex.html
NETWORK:http://*https://*
FALLBACK:/ offline.html
Requests for files not found in the cache, are directed to offline.html (when offline).
![Page 44: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/44.jpg)
CACHE MANIFEST
CACHE:app.jsapp.cssindex.html
NETWORK:http://*https://*
FALLBACK:/ offline.html
![Page 45: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/45.jpg)
The Manifest
5. Include some versioning to cache bust your manifest
# version 16
![Page 46: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/46.jpg)
The Process
![Page 47: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/47.jpg)
Browser: request Server: serve allBrowser: I have a manifest, cache
assets
Server: serve manifest assets
Browser: applicationCache
updatedBrowser: reload
Browser: serve locally
Browser: only request manifest file
Server: 304 Not Modified
![Page 48: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/48.jpg)
applicationCache.onUpdateReady = function () { if (confirm("New version ready. Refresh?")) { // reload window.location = window.location; }};
When your app updates
![Page 49: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/49.jpg)
Do offline last
Tip
![Page 50: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/50.jpg)
Web SocketsTwo way real-time comms
http://www.flickr.com/photos/44442915@N00/4960579336
![Page 51: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/51.jpg)
In a nutshell๏Persistent connection๏Tiny chunks of data exchanged๏Bi-directional & no origin rules
![Page 52: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/52.jpg)
Some Uses๏Chat / "hello world"
๏Streaming data like stock share prices
๏Multi-player game state
๏Google Wave remember? :)
![Page 53: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/53.jpg)
Native or polyfilled
IE6✓ :'(
![Page 54: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/54.jpg)
http://github.com/gimite/web-socket-js/
![Page 55: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/55.jpg)
new WebSocket(url)
http://dev.w3.org/html5/websockets/
![Page 56: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/56.jpg)
ws://node.remysharp.com:8000
http://github.com/miksago/node-websocket-server
![Page 57: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/57.jpg)
onopenonmessageoncloseonerror
![Page 58: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/58.jpg)
var data = JSON.parse(event.data);
![Page 59: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/59.jpg)
.send
![Page 60: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/60.jpg)
var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url);
conn.onopen = function () { conn.send('hello world');};
conn.onmessage = function (event) { console.log(event.data);};
![Page 61: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/61.jpg)
var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url);
conn.onopen = function () { conn.send('hello world');};
conn.onmessage = function (event) { console.log(event.data);};
![Page 62: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/62.jpg)
var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url);
conn.onopen = function () { conn.send('hello world');};
conn.onmessage = function (event) { console.log(event.data);};
![Page 63: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/63.jpg)
var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url);
conn.onopen = function () { conn.send('hello world');};
conn.onmessage = function (event) { console.log(event.data);};
![Page 64: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/64.jpg)
var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url);
conn.onopen = function () { conn.send('hello world');};
conn.onmessage = function (event) { console.log(event.data);};
![Page 65: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/65.jpg)
var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url);
conn.onopen = function () { conn.send('hello world');};
conn.onmessage = function (event) { console.log(event.data);};
![Page 66: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/66.jpg)
var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url);
conn.onopen = function () { conn.send('hello world');};
conn.onmessage = function (event) { console.log(event.data);};
![Page 67: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/67.jpg)
var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url);
conn.onopen = function () { conn.send('hello world');};
conn.onmessage = function (event) { console.log(event.data);};
Let's play
![Page 68: HTML5 - remysharp.com · It's not one is better than the other, they do different things! Select canvas when it makes sense! Don't assume interactive means canvas! Check out raphaeljs.com](https://reader033.vdocument.in/reader033/viewer/2022050504/5f96462484a7c15daf6d08c3/html5/thumbnails/68.jpg)
Questions?@[email protected]