html5 canvas and media

HTML5 – Canvas and Media

Suresh BallaPrincipal ConsultantNeudesic

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

Canvas = Drawing

Canvas Usage Scenarios

Games

Multimedia Apps

Charting

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

Supported Browsers

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}

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" />

Steps to use the Canvas

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

Step 1: Define a <canvas> Element

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

Canvas not supported! </canvas>

Step 2: Locate the <canvas> ID

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

</script>

Step 3: Access the 2d Context

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

</script>

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>

Hello World Demo

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

Canvas API Properties

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

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

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

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

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

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

Rectangle Demo

Arc/Ellipse Functions

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

Properties:• fillStyle, strokeStyle

Understanding Start/End arc() Angles

01 * PI

0.5 * PI

1.5 * PI

Arc/Ellipse Demo

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

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

Properties: • lineCap, lineJoin, lineWidth, miterLimit

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();

}

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

Properties: • lineCap, lineJoin, lineWidth, miterLimit

Line and Path demo

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

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

Properties: • font, textAlign, textBaseline

Text demo

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

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

destHeight); • toDataURL()

createPattern Options • createPattern(obj, pattern)

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

Image demo

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

Video Functions

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

Video demo

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

Transform Functions

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

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)

Transformation demo

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

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

Pixel Functions

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

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

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);

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

Media

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

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

No common format

Encoding Media

http://mirovideoconverter.com/

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

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/

Encode in multiple formats

Server Mime Types

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

Demo

Q&A

Thank YouSuresh.Balla@neudesic.com