62
HTML5 – Canvas and Media Suresh Balla Principal Consultant Neudesic

Html5 Canvas and Media

Embed Size (px)

DESCRIPTION

HTML 5 Canvas and Media

Citation preview

Page 1: Html5 Canvas and Media

HTML5 – Canvas and Media

Suresh BallaPrincipal ConsultantNeudesic

Page 2: Html5 Canvas and Media

Canvas• Usage Scenarios• Fundamentals• Overview of API• Drawing – Rectangles, Ellipses, Lines, Paths, Text, Images, Video,

Pixels manipulations• Media• Native media formats, browser support, mime types

Agenda

Page 3: Html5 Canvas and Media

Canvas = Drawing

Page 4: Html5 Canvas and Media

Canvas Usage Scenarios

Games

Multimedia Apps

Charting

Page 5: Html5 Canvas and Media

Canvas demos online

• http://canvasdemos.com• http://beautyoftheweb.com/Experience• http://cuttherope.ie• http://chrome.angrybirds.com• http://disneydigitalbooks.go.com/tron/• http://www.jswidget.com/index-ipaint.html

Page 6: Html5 Canvas and Media

Supported Browsers

Page 7: Html5 Canvas and Media

Detecting Canvas Support• Modernizr can be used to detect canvas support• Single script• Uses feature detection rather than browser sniffing• http://modernizr.com

if (Modernizr.canvas) {//canvas code}else {//fallback code}

Page 8: Html5 Canvas and Media

Canvas FeaturesKey canvas features: • Provides a drawing surface • Pixel-based rendering • Draw shapes, lines, gradients, and images • Built-in support for transformations • No built-in support for animations

<canvas id="myCanvas" width="400" height="200" />

Page 9: Html5 Canvas and Media

Steps to use the Canvas

1. Define a <canvas> element 2. Locate the <canvas> ID 3. Access the 2d context 4. Draw shapes

Page 10: Html5 Canvas and Media

Step 1: Define a <canvas> Element

<canvas id="myCanvas" width="400" height="200>

Canvas not supported! </canvas>

Page 11: Html5 Canvas and Media

Step 2: Locate the <canvas> ID

<script> window.onload = function () { var canvas = document.getElementById('myCanvas'); };

</script>

Page 12: Html5 Canvas and Media

Step 3: Access the 2d Context

<script> window.onload = function () { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); };

</script>

Page 13: Html5 Canvas and Media

Step 4: Draw Shapes

<script> window.onload = function () { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; ctx.fillRect(0,0,200,100); };

</script>

Page 14: Html5 Canvas and Media

Hello World Demo

Page 15: Html5 Canvas and Media

Canvas API Functions addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect

Page 16: Html5 Canvas and Media

Canvas API Properties

data miterLimit fillStyle shadowBlur font shadowColor globalAlpha shadowOffsetX globalCompositeOperation shadowOffsetY height strokeStyle lineCap textAlign lineJoin textBaseline lineWidth width

Page 17: Html5 Canvas and Media

Line and Shape Functions addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect

Page 18: Html5 Canvas and Media

Text Functions addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect

Page 19: Html5 Canvas and Media

Transform FunctionsaddColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect

Page 20: Html5 Canvas and Media

Rectangle and Ellipse FunctionsaddColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect

closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect

Page 21: Html5 Canvas and Media

Rectangle Functions

Functions: • clearRect(x, y, w, h) • fillRect(x, y, w, h) • rect(x, y, w, h) • strokeRect(x, y, w, h)

Properties: • fillStyle, strokeStyle

Page 22: Html5 Canvas and Media

Rectangle Demo

Page 23: Html5 Canvas and Media

Arc/Ellipse Functions

Functions:• arc(x, y, radius, startAngle, endAngle, antiClockwise) • arcTo(x1, y1, x2, y2, radius)

Properties:• fillStyle, strokeStyle

Page 24: Html5 Canvas and Media

Understanding Start/End arc() Angles

01 * PI

0.5 * PI

1.5 * PI

Page 25: Html5 Canvas and Media

Arc/Ellipse Demo

Page 26: Html5 Canvas and Media

Line and Path Functions addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect

Page 27: Html5 Canvas and Media

Line Functions and Properties Functions: • beginPath() • closePath() • lineTo(x, y) • moveTo(x, y) • stroke()

Properties: • lineCap, lineJoin, lineWidth, miterLimit

Page 28: Html5 Canvas and Media

Drawing Lines Example window.onload = function() {

var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.strokeStyle = 'Red'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(100, 400); ctx.lineTo(50, 500); ctx.lineTo(150, 500); ctx.lineTo(100, 400); ctx.stroke(); ctx.fillStyle = 'Yellow'; ctx.fill();

}

Page 29: Html5 Canvas and Media

Path Functions and Properties Functions: • beginPath() • closePath() • moveTo(x, y) • stroke()

Properties: • lineCap, lineJoin, lineWidth, miterLimit

Page 30: Html5 Canvas and Media

Line and Path demo

Page 31: Html5 Canvas and Media

Text Functions addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect

Page 32: Html5 Canvas and Media

Text Functions and Properties Functions: • fillText(text, x, y, maxWidth) • measureText(text).width • strokeText(text, x, y, maxWidth)

Properties: • font, textAlign, textBaseline

Page 33: Html5 Canvas and Media

Text demo

Page 34: Html5 Canvas and Media

Image Functions addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo toDataURLcreateRadialGradient rect

Page 35: Html5 Canvas and Media

Image Functions and Properties • Functions: • createPattern(obj, pattern) • drawImage(img, destX, destY, destWidth,

destHeight); • toDataURL()

Page 36: Html5 Canvas and Media

createPattern Options • createPattern(obj, pattern)

• Pattern parameter options: • repeat-x • repeat-y • repeat • no-repeat

Page 37: Html5 Canvas and Media

Image demo

Page 38: Html5 Canvas and Media

Video FunctionsaddColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo toDataURLcreateRadialGradient rect

Page 39: Html5 Canvas and Media

Video Functions

Functions: • drawImage(video, x, y, width, height);

Page 40: Html5 Canvas and Media

Video demo

Page 41: Html5 Canvas and Media

Transform FunctionsaddColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo toDataURLcreateRadialGradient rect

Page 42: Html5 Canvas and Media

Transform Functions

Functions: • restore() • rotate(angle) • save() • scale(x, y) • translate(x, y)

Page 43: Html5 Canvas and Media

Matrix Transform Functions

Functions: • setTransform(scale-x, skew-x, skew-y, scale-y,

translate-x, translate-y) • transform(scale-x, skew-x, skew-y, scale-y,

translate-x, translate-y)

Page 44: Html5 Canvas and Media

Transformation demo

Page 45: Html5 Canvas and Media

Pixel FunctionsaddColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo toDataURLcreateRadialGradient rect

Page 46: Html5 Canvas and Media

Manipulating Pixels• The HTML5 canvas allows pixels to be

manipulated or created using built-in functions • Create backgrounds dynamically • Change hue, contrast, etc. • Convert to grayscale • Sharpen colors • Perform any pixel-related functionality

• Any images loaded must be from the origin domain for pixel functions to work properly

Page 47: Html5 Canvas and Media

Pixel Functions

Functions: • createImageData(width, height) • createImageData(imgData); • getImageData(x, y, width, height) • putImageData(imgData, dx, dy, x, y, width, height)

Page 48: Html5 Canvas and Media

Understanding Pixels

0Red

1Gree

n2

Blue

3Alph

a

Pixel 1

4Red

5Gree

n6

Blue

7Alph

a8

Red

9Gree

n10

Blue

11Alph

a

Pixel 2 Pixel 3

12Red

13Gree

n14

Blue

15Alph

a

Pixel 4

16Red

17Gree

n18

Blue

19Alph

a20Red

21Gree

n22

Blue

23Alph

a

Pixel 5 Pixel 6

Page 49: Html5 Canvas and Media

Iterating through Pixelsvar pixelData = ctx.createImageData(200, 200);for (var i = 0; i < pixelData.length; i+=4) {

var r = pixelData[i];var g = pixelData[i+1];var b = pixelData[i+2];var a = pixelData[i+3];//manipulate pixel data}

ctx.putImageData(pixelData, 0, 0);

Page 50: Html5 Canvas and Media

Demo - GreyScalehttp://en.wikipedia.org/wiki/Grayscale

Page 51: Html5 Canvas and Media

Media

Page 52: Html5 Canvas and Media

Native Media Formats • Video • WebM • H.264 (MP4) • Ogg Theora

Page 53: Html5 Canvas and Media

Native Media Formats • Audio • WAV • MP3 • Ogg Vorbis

Page 54: Html5 Canvas and Media

No common format

Page 55: Html5 Canvas and Media

Encoding Media

http://mirovideoconverter.com/

Page 56: Html5 Canvas and Media

Native Video Browser Support

VP8 (WebM)

Depends 6.0 4.0 Depends Depends

H.264 (MP4)

9 beta X Depends 3.1 X

Ogg Theora X 3.0 3.5 X 10.5

Source: http://en.wikipedia.org/wiki/HTML5_video

Page 57: Html5 Canvas and Media

Native Audio Browser Support

WAV 9 beta X 3.6 5.1 10.5

MP3 9 beta 6.0 X 5.1 X

Ogg Vorbis X 6.0 3.6 X 10.5

Source: http://html5doctor.com/native-audio-in-the-browser/

Page 58: Html5 Canvas and Media

Encode in multiple formats

Page 59: Html5 Canvas and Media

Server Mime Types

• video/ogg .ogv • video/mp4 .mp4 • video/webm .webm

Page 60: Html5 Canvas and Media

Demo

Page 61: Html5 Canvas and Media

Q&A