Upload
suresh-balla
View
841
Download
0
Tags:
Embed Size (px)
DESCRIPTION
HTML 5 Canvas and Media
Citation preview
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