Scribd
Upload
47 views

(2011) (Session 508) Understanding and Optimizing Web Graphics

Here are the key steps to draw a basic shape like a number or letter on an HTML5 canvas: 1. Get the 2D drawing context from the canvas element 2. Clear the canvas 3. Use path drawing commands like moveTo, lineTo, arc/curveTo to define the outline of the shape 4. Set the fill or stroke style 5. Fill or stroke the path This allows you to precisely define vector shapes and draw them onto the raster canvas context. Repeating these steps enables creating complex drawings and animations programmatically using JavaScript.

Uploaded by

Hiod
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
47 views

(2011) (Session 508) Understanding and Optimizing Web Graphics

Here are the key steps to draw a basic shape like a number or letter on an HTML5 canvas: 1. Get the 2D drawing context from the canvas element 2. Clear the canvas 3. Use path drawing commands like moveTo, lineTo, arc/curveTo to define the outline of the shape 4. Set the fill or stroke style 5. Fill or stroke the path This allows you to precisely define vector shapes and draw them onto the raster canvas context. Repeating these steps enables creating complex drawings and animations programmatically using JavaScript.

Uploaded by

Hiod
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 161

Understanding and

Optimizing Web Graphics

Session 508
Dean Jackson
Apple

These are confidential sessions—please refrain from streaming, blogging, or taking pictures

1
2
3
4
5
<img>

6
7
8
9
5 6 7 8 9 10 11

1
3
4

10
11
What Technologies Are We Talking About?

12
Why Talk About Graphics Now?

13
14
15
16
17
18
Demo

19
WWDC2011 Benchmark

iOS 4.3 17

4+ Times
iOS 5.0 Faster 77

0 20 40 60 80
Frames per Second

20
Internet Explorer 9 Fish Tank Benchmark

iOS 4.3 4

7 Times
iOS 5.0 Faster 28

0 7.5 15 22.5 30
Frames per Second

21
“The Man In Blue” Benchmark

iOS 4.3 12

3+ Times
iOS 5.0 Faster 38

0 10 20 30 40
Frames per Second

22
What Do You Need to Do?

Nothing!

23
Why Talk About Graphics Now?

24
What You’ll Learn

Basic Concepts with Canvas and SVG

Animation and Interactivity

Tips and Special Effects

25
Basic Concepts
Canvas and SVG

26
The HTML5 Canvas Element
<canvas>

27
The Canvas Element

• Canvas is like a blank <img> with JavaScript API


• Instead of pixels coming from a file, you decide what is drawn in the
image using JavaScript
• Each command is immediately rendered into the canvas

28
Using Canvas

<html>
<head> ... </head>
Page Heading <body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
<h1>Page Heading</h1>
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum. <p>Lorem ipsum ...</p>

<canvas id="picture1"
width="400"
height="300"/>

<p>Lorem ipsum ...</p>


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

</body>
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.

</html>

29
Using Canvas

<html>
<head> ... </head>
Page Heading <body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
<h1>Page Heading</h1>
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum. <p>Lorem ipsum ...</p>

<canvas id="picture1"
width="400"
height="300"/>

<p>Lorem ipsum ...</p>


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

</body>
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.

</html>

30
31
32
33
Basic Drawing
512

512

34
Basic Drawing
var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, 512, 512);

// draw shield background


ctx.beginPath();
ctx.moveTo(71, 460);
ctx.lineTo(30, 0);
ctx.lineTo(481, 0);
ctx.lineTo(440, 460);
ctx.lineTo(255, 512);
ctx.closePath();

ctx.fillStyle = "#E34F26";
ctx.fill();

35
Basic Drawing
var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, 512, 512);

// draw shield background


ctx.beginPath();
ctx.moveTo(71, 460);
ctx.lineTo(30, 0);
ctx.lineTo(481, 0);
ctx.lineTo(440, 460);
ctx.lineTo(255, 512);
ctx.closePath();

ctx.fillStyle = "#E34F26";
ctx.fill();

36
Basic Drawing
var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, 512, 512);

// draw shield background


ctx.beginPath();
ctx.moveTo(71, 460);
ctx.lineTo(30, 0);
ctx.lineTo(481, 0);
ctx.lineTo(440, 460);
ctx.lineTo(255, 512);
ctx.closePath();

ctx.fillStyle = "#E34F26";
ctx.fill();

37
Basic Drawing
var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, 512, 512);

// draw shield background


ctx.beginPath();
ctx.moveTo(71, 460);
ctx.lineTo(30, 0);
ctx.lineTo(481, 0);
ctx.lineTo(440, 460);
ctx.lineTo(255, 512);
ctx.closePath();

ctx.fillStyle = "#E34F26";
ctx.fill();

38
Basic Drawing
var ctx = canvas.getContext("2d");
(30, 0) (481, 0)
ctx.clearRect(0, 0, 512, 512);

// draw shield background


ctx.beginPath();
ctx.moveTo(71, 460);
ctx.lineTo(30, 0);
ctx.lineTo(481, 0);
ctx.lineTo(440, 460);
ctx.lineTo(255, 512);
ctx.closePath();

ctx.fillStyle = "#E34F26";
ctx.fill();
(71, 460)

39
Basic Drawing
var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, 512, 512);

// draw shield background


ctx.beginPath();
ctx.moveTo(71, 460);
ctx.lineTo(30, 0);
ctx.lineTo(481, 0);
ctx.lineTo(440, 460);
ctx.lineTo(255, 512);
ctx.closePath();

ctx.fillStyle = "#E34F26";
ctx.fill();

40
Basic Drawing
var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, 512, 512);

// draw shield background


ctx.beginPath();
ctx.moveTo(71, 460);
ctx.lineTo(30, 0);
ctx.lineTo(481, 0);
ctx.lineTo(440, 460);
ctx.lineTo(255, 512);
ctx.closePath();

ctx.fillStyle = "#E34F26";
ctx.fill();

41
Basic Drawing
// draw number five
ctx.beginPath();
ctx.moveTo(181, 208);
ctx.lineTo(176, 150);
ctx.lineTo(392, 150);
ctx.lineTo(393, 138);
ctx.lineTo(396, 109);
...
ctx.lineTo(372, 372);
ctx.lineTo(385, 223);
ctx.lineTo(387, 208);
ctx.lineTo(371, 208);
ctx.closePath();

ctx.fillStyle = "#DBDBDB";
ctx.fill();

42
Basic Drawing
// draw shield highlight
ctx.beginPath();
ctx.moveTo(256, 472);
ctx.lineTo(405, 431);
ctx.lineTo(440, 37);
ctx.lineTo(256, 37);
ctx.closePath();

ctx.fillStyle =
"rgba(255, 255, 255, 0.3)";
ctx.fill();

43
Basic Drawing
// draw shield highlight
ctx.beginPath();
ctx.moveTo(256, 472);
ctx.lineTo(405, 431);
ctx.lineTo(440, 37);
ctx.lineTo(256, 37);
ctx.closePath();

ctx.fillStyle =
"rgba(255, 255, 255, 0.3)";
ctx.fill();

44
Using the Canvas
In HTML
<canvas id=“html5logo”></canvas>

In CSS
h1 {
background-image: -webkit-canvas(“html5logo”);
}

var ctx = document.getCSSCanvasContext(“2d”,


“html5logo”, 500, 500);

45
Using the Canvas
In HTML
<canvas id=“html5logo”></canvas>

In CSS
h1 {
background-image: -webkit-canvas(“html5logo”);
}

var ctx = document.getCSSCanvasContext(“2d”,


“html5logo”, 500, 500);

46
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, 512, 512);

// draw shield background


ctx.beginPath();
ctx.moveTo(71, 460);
ctx.lineTo(30, 0);
ctx.lineTo(481, 0);
ctx.lineTo(440, 460);
ctx.lineTo(255, 512);
ctx.closePath();

ctx.fillStyle = "#E34F26";
ctx.fill();

// draw number five


ctx.beginPath();
ctx.moveTo(181, 208);
ctx.lineTo(176, 150);
ctx.lineTo(392, 150);
ctx.lineTo(393, 138);
ctx.lineTo(396, 109);
ctx.lineTo(397, 94);
ctx.lineTo(114, 94);
ctx.lineTo(115, 109);
ctx.lineTo(129, 265);
ctx.lineTo(325, 265);
ctx.lineTo(318, 338);
ctx.lineTo(256, 355);
ctx.lineTo(192, 338);
ctx.lineTo(188, 293);
ctx.lineTo(132, 293);
ctx.lineTo(139, 382);
ctx.lineTo(256, 414);
ctx.lineTo(371, 382);
ctx.lineTo(372, 372);
ctx.lineTo(385, 223);
ctx.lineTo(387, 208);
ctx.lineTo(371, 208);
ctx.closePath();

ctx.fillStyle = "#DBDBDB";
ctx.fill();

// draw shield highlight


ctx.beginPath();
ctx.moveTo(256, 472);
ctx.lineTo(405, 431);
ctx.lineTo(440, 37);
ctx.lineTo(256, 37);
ctx.closePath();

ctx.fillStyle = "rgba(255, 255, 255, 0.3)";


ctx.fill();

47
SVG
Scalable Vector Graphics

48
Scalable Vector Graphics

• Markup format for graphics


• Vector-based, so perfect for resolution independence
• Lots of tool support

49
Creating the Graphic

<svg>
... content goes here ...
</svg>

50
Creating the Graphic

<svg viewBox=“0 0 512 512”>


... content goes here ...
</svg>

51
Creating the Graphic

<svg viewBox=“0 0 512 512”>


... content goes here ...
</svg>

52
HTML 5 Logo
512

512

53
HTML 5 Logo

54
HTML 5 Logo

<polygon fill="#E34F26"
points="71,460
30,0
481,0
440,460
255,512"/>

55
HTML 5 Logo

<polygon fill="#E34F26"
points="71,460
30,0
481,0
440,460
255,512"/>

56
HTML 5 Logo

<polygon fill="#E34F26"
points="71,460
30,0
481,0
440,460
255,512"/>

57
HTML 5 Logo

<polygon fill="#E34F26"
points="71,460
30,0
481,0
440,460
255,512"/>

58
HTML 5 Logo
(30, 0) (481, 0)
<polygon fill="#E34F26"
points="71,460
30,0
481,0
440,460
255,512"/>

(71, 460)

59
HTML 5 Logo
<polygon fill="#DBDBDB"
points="181,208
176,150
392,150
393,138
396,109
397,94
114,94
115,109
129,265
325,265
318,338
256,355
192,338
188,293
132,293
139,382
256,414
371,382
372,372
385,223
387,208
371,208"/>

60
HTML 5 Logo

<polygon fill="#E34F26"
points="71,460
30,0
481,0
440,460
255,512"/>

<polygon fill="#DBDBDB"
points="181,208
176,150
392,150
393,138
396,109
397,94
114,94 ...

61
HTML 5 Logo

<polygon fill="white"
opacity="0.3"
points="256,472
405,431
440,37
256,37"/>

62
HTML 5 Logo

<polygon fill="white"
opacity="0.3"
points="256,472
405,431
440,37
256,37"/>

63
<svg viewBox="0 0 512 512">
<polygon fill="#E34F26" points="71,460 30,0 481,0 440,460 255,512"/>
<polygon fill="#DBDBDB" points="181,208 176,150 392,150 393,138 396,109 397,94
114,94 115,109 129,265 325,265 318,338
256,355 192,338 188,293 132,293 139,382
256,414 371,382 372,372 385,223 387,208 371,208"/>
<polygon fill="white" opacity="0.3" points="256,472 405,431 440,37 256,37"/>
</svg>

497 272
bytes! bytes!

Raw Compressed

64
Using the Image
In HTML
<img src=“html5logo.svg”>

In CSS
h1 {
background-image: url(“html5logo.svg”);
background-size: 300px 300px;
}

65
Using SVG Inline

<html>
<head> ... </head>
Page Heading <body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
<h1>Page Heading</h1>
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum. <p>Lorem ipsum ...</p>

<svg id="picture1">
...
</svg>

<p>Lorem ipsum ...</p>


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

</body>
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.

</html>

66
<svg viewBox="0 0 512 512">
<polygon fill="#E34F26" points="71,460 30,0 481,0 440,460 255,512"/>
<polygon fill="#DBDBDB" points="181,208 176,150 392,150 393,138 396,109 397,94
114,94 115,109 129,265 325,265 318,338
256,355 192,338 188,293 132,293 139,382
256,414 371,382 372,372 385,223 387,208 371,208"/>
<polygon fill="white" opacity="0.3" points="256,472 405,431 440,37 256,37"/>
</svg>

67
<svg viewBox="0 0 512 512">
<polygon fill="#E34F26" points="71,460 30,0 481,0 440,460 255,512"/>
<polygon fill="#DBDBDB" points="181,208 176,150 392,150 393,138 396,109 397,94
114,94 115,109 129,265 325,265 318,338
256,355 192,338 188,293 132,293 139,382
256,414 371,382 372,372 385,223 387,208 371,208"/>
<polygon fill="white" opacity="0.3" points="256,472 405,431 440,37 256,37"/>
</svg>

<svg viewBox="0 0 512 512">


<style>
.shield {
fill: #E34F26;
}

.five {
fill: #DBDBDB;
}

.highlight {
fill: white;
opacity: 0.3;
}
</style>
<polygon class="shield" points="71,460 30,0 481,0 440,460 255,512"/>
<polygon class="five" points="181,208 176,150 392,150 393,138 396,109 397,94
114,94 115,109 129,265 325,265 318,338
256,355 192,338 188,293 132,293 139,382
256,414 371,382 372,372 385,223 387,208 371,208"/>
<polygon class="highlight" points="256,472 405,431 440,37 256,37"/>
</svg>

68
<svg viewBox="0 0 512 512">
<style>
.shield {
fill: #E34F26;
}

.five {
fill: #DBDBDB;
}

.highlight {
fill: white;
opacity: 0.3;
}
</style>
<polygon class="shield" points="71,460 30,0 481,0 440,460 255,512"/>
<polygon class="five" points="181,208 176,150 392,150 393,138 396,109 397,94
114,94 115,109 129,265 325,265 318,338
256,355 192,338 188,293 132,293 139,382
256,414 371,382 372,372 385,223 387,208 371,208"/>
<polygon class="highlight" points="256,472 405,431 440,37 256,37"/>
</svg>

69
<svg viewBox="0 0 512 512">
<style>
.shield {
fill: #E34F26;
}

.five {
fill: #DBDBDB;
}

.highlight {
fill: white;
opacity: 0.3;
}
</style>
<polygon class="shield" points="71,460 30,0 481,0 440,460 255,512"/>
<polygon class="five" points="181,208 176,150 392,150 393,138 396,109 397,94
114,94 115,109 129,265 325,265 318,338
256,355 192,338 188,293 132,293 139,382
256,414 371,382 372,372 385,223 387,208 371,208"/>
<polygon class="highlight" points="256,472 405,431 440,37 256,37"/>
</svg>

70
<svg viewBox="0 0 512 512">
<style>
.shield {
fill: #E34F26;
}

.five {
fill: #DBDBDB;
}

.highlight {
fill: white;
opacity: 0.3;
}
</style>
<polygon class="shield" points="71,460 30,0 481,0 440,460 255,512"/>
<polygon class="five" points="181,208 176,150 392,150 393,138 396,109 397,94
114,94 115,109 129,265 325,265 318,338
256,355 192,338 188,293 132,293 139,382
256,414 371,382 372,372 385,223 387,208 371,208"/>
<polygon class="highlight" points="256,472 405,431 440,37 256,37"/>
</svg>

71
.shield {
.shield { fill: #C1B53A;
fill: #E34F26; stroke: white;
} stroke-width: 10px;
}
.five {
fill: #DBDBDB; .five {
} fill: #9B9B9B;
}
.highlight {
fill: white; .highlight {
opacity: 0.3; fill: #F0E145;
} opacity: 0.3;
}

72
73
Canvas SVG
Mode Immediate Retained
Basic Graphics ✓ ✓
Background Image ✓ ✓
Embed inline ✓ ✓
Accessibility ✓
CSS Styling ✓
Authoring tools ✓
Speed / Memory ✓✓ ✓

74
What You Will Learn

Basic Concepts with Canvas and SVG

Animation and Interactivity

Tips and Special Effects

75
What You Will Learn

Basic Concepts with Canvas and SVG

Animation and Interactivity

Tips and Special Effects

76
Animation and Interactivity

77
Annual Rainfall in Canberra
630

612.5
Rainfall (mm)

595

577.5

560
2007 2008 2009 2010

Year

78
79
80
Animating with Canvas

81
Animating with Canvas

var DELAY = 1000 / 30; // Aim for 30 fps

function animationStep(fromValue, toValue, startedAt, duration) {

var elapsed = Date.now() - startedAt;


var progress = Math.min(elapsed / duration, 1);
var currentValue = fromValue + (toValue - fromValue) * progress;

// Draw scene with the new value


draw(currentValue);

if (elapsed < duration) {


setTimeout(function () {
animationStep(fromValue, toValue, startedAt, duration);
}, DELAY);
}

82
Animating with Canvas

var DELAY = 1000 / 30; // Aim for 30 fps

function animationStep(fromValue, toValue, startedAt, duration) {

var elapsed = Date.now() - startedAt;


var progress = Math.min(elapsed / duration, 1);
var currentValue = fromValue + (toValue - fromValue) * progress;

// Draw scene with the new value


draw(currentValue);

if (elapsed < duration) {


setTimeout(function () {
animationStep(fromValue, toValue, startedAt, duration);
}, DELAY);
}

83
Animating with Canvas

var DELAY = 1000 / 30; // Aim for 30 fps

function animationStep(fromValue, toValue, startedAt, duration) {

var elapsed = Date.now() - startedAt;


var progress = Math.min(elapsed / duration, 1);
var currentValue = fromValue + (toValue - fromValue) * progress;

// Draw scene with the new value


draw(currentValue);

if (elapsed < duration) {


setTimeout(function () {
animationStep(fromValue, toValue, startedAt, duration);
}, DELAY);
}

84
Animating with Canvas

var DELAY = 1000 / 30; // Aim for 30 fps

function animationStep(fromValue, toValue, startedAt, duration) {

var elapsed = Date.now() - startedAt;


var progress = Math.min(elapsed / duration, 1);
var currentValue = fromValue + (toValue - fromValue) * progress;

// Draw scene with the new value


draw(currentValue);

if (elapsed < duration) {


setTimeout(function () {
animationStep(fromValue, toValue, startedAt, duration);
}, DELAY);
}

85
Animating with Canvas

var DELAY = 1000 / 30; // Aim for 30 fps

function animationStep(fromValue, toValue, startedAt, duration) {

var elapsed = Date.now() - startedAt;


var progress = Math.min(elapsed / duration, 1);
var currentValue = fromValue + (toValue - fromValue) * progress;

// Draw scene with the new value


draw(currentValue);

if (elapsed < duration) {


setTimeout(function () {
animationStep(fromValue, toValue, startedAt, duration);
}, DELAY);
}

86
Animating with Canvas

var DELAY = 1000 / 30; // Aim for 30 fps

function animationStep(fromValue, toValue, startedAt, duration) {

var elapsed = Date.now() - startedAt;


var progress = Math.min(elapsed / duration, 1);
var currentValue = fromValue + (toValue - fromValue) * progress;

// Draw scene with the new value


draw(currentValue);

if (elapsed < duration) {


setTimeout(function () {
animationStep(fromValue, toValue, startedAt, duration);
}, DELAY);
}

87
Beyond the Basics

• Use an easing function to smooth the animation


• Synchronize multiple animating objects
• Animating complex types like points or matrices

88
Animating with SVG

89
Animating with SVG

<circle cx="100" cy="100" r="8">

</circle>

90
Animating with SVG

<circle cx="100" cy="100" r="8">


<animate attributeName="cx" from="100" to="200"
dur="2s"/>
</circle>

91
Animating with SVG

<circle cx="100" cy="100" r="8">


<animate id="slide" attributeName="cx" from="100"
to="200" dur="2s"/>
<animate attributeName="cy" from="100" to="80" dur="2s"
begin="slide.end"/>
</circle>

92
Animating with SVG

<circle cx="100" cy="100" r="8">


<animate id="slide" attributeName="cx" from="100"
to="200" dur="2s"/>
<animate attributeName="cy" from="100" to="80" dur="2s"
begin="slide.end"/>
</circle>

93
Animating with SVG

<circle cx="100" cy="100" r="8">


<animate id="slide" attributeName="cx" from="100"
to="200" dur="2s"/>
<animate attributeName="cy" from="100" to="80" dur="2s"
begin="slide.end + 2s"/>
</circle>

94
Year: 2008
Month: February
Rainfall: 65mm

95
Interaction with Canvas

function isPointInShape(context, x, y) {

context.beginPath();
context.moveTo(..., ...);
...
context.closePath();

return context.isPointInPath(x, y);

96
Interaction with Canvas

function isPointInShape(context, x, y) {

context.beginPath();
context.moveTo(..., ...);
...
context.closePath();

return context.isPointInPath(x, y);

97
Interaction with Canvas

function isPointInShape(context, x, y) {

context.beginPath();
context.moveTo(..., ...);
...
context.closePath();

return context.isPointInPath(x, y);

98
Interaction with Canvas

function isPointInShape(context, x, y) {

context.beginPath();
context.moveTo(..., ...);
...
context.closePath();

return context.isPointInPath(x, y);

99
100
Interaction with SVG

<polygon id="myShape"
points="100,100 ..."/>

101
Interaction with SVG

<polygon id="myShape"
points="100,100 ..."/>

var shape = document.getElementById("myShape");


shape.addEventListener("click",
myClickHandler,
false);

102
Interaction with SVG

<polygon id="myShape"
points="100,100 ..."/>

var shape = document.getElementById("myShape");


shape.addEventListener("click",
myClickHandler,
false);

103
104
Drawing Images

105
Drawing Images
img = new Image();
img.src = “http://:...”;

// wait for image to load

context.drawImage(img,
0, 0);

context.drawImage(img,
0, 0,
300, 600);

context.drawImage(img,
230, 130,
250, 250,
0, 0,
500, 500);

106
Drawing Images
img = new Image();
img.src = “http://:...”;

// wait for image to load

context.drawImage(img,
0, 0);

context.drawImage(img,
0, 0,
300, 600);

context.drawImage(img,
230, 130,
250, 250,
0, 0,
500, 500);

107
Drawing Images
img = new Image();
img.src = “http://:...”;

// wait for image to load

context.drawImage(img,
0, 0);

context.drawImage(img,
0, 0,
300, 600);

context.drawImage(img,
230, 130,
250, 250,
0, 0,
500, 500);

108
Drawing Images
img = new Image();
img.src = “http://:...”;

// wait for image to load

context.drawImage(img,
0, 0);

context.drawImage(img,
0, 0,
300, 600);

context.drawImage(img,
230, 130,
250, 250,
0, 0,
500, 500);

109
Drawing Images
img = new Image();
img.src = “http://:...”;

// wait for image to load

context.drawImage(img,
0, 0);

context.drawImage(img,
0, 0,
300, 600);

context.drawImage(img,
230, 130,
250, 250,
0, 0,
500, 500);

110
111
112
113
“The Incident” Sprite Sheet

114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
Demo

129
What You Will Learn

Basic Concepts with Canvas and SVG

Animation and Interactivity

Tips and Special Effects

130
What You Will Learn

Basic Concepts with Canvas and SVG

Animation and Interactivity

Tips and Special Effects

131
Tips and Special Effects

132
133
134
!?
I want to manipulate pixels

135
Accessing Pixels

var pixels = context.getImageData(x, y, width, height);

pixels.data = [ R G B A R G B A R G B A … ];

136
Manipulating Pixels

var input = context.getImageData(0, 0, width, height);


var output = context.createImageData(width, height);

for (var i=0; i < (width * height); i++) {


// for every pixel
output.data[i * 4] = // some operation
output.data[i * 4 + 1] = // some operation
output.data[i * 4 + 2] = // some operation
output.data[i * 4 + 3] = // some operation
}

context.drawImage(output, 0, 0, width, height);

137
Manipulating Pixels

var input = context.getImageData(0, 0, width, height);


var output = context.createImageData(width, height);

for (var i=0; i < (width * height); i++) {


// for every pixel
output.data[i * 4] = // some operation
output.data[i * 4 + 1] = // some operation
output.data[i * 4 + 2] = // some operation
output.data[i * 4 + 3] = // some operation
}

context.drawImage(output, 0, 0, width, height);

138
Manipulating Pixels

var input = context.getImageData(0, 0, width, height);


var output = context.createImageData(width, height);

for (var i=0; i < (width * height); i++) {


// for every pixel
output.data[i * 4] = // some operation
output.data[i * 4 + 1] = // some operation
output.data[i * 4 + 2] = // some operation
output.data[i * 4 + 3] = // some operation
}

context.drawImage(output, 0, 0, width, height);

139
Manipulating Pixels

var input = context.getImageData(0, 0, width, height);


var output = context.createImageData(width, height);

for (var i=0; i < (width * height); i++) {


// for every pixel
output.data[i * 4] = // some operation
output.data[i * 4 + 1] = // some operation
output.data[i * 4 + 2] = // some operation
output.data[i * 4 + 3] = // some operation
}

context.drawImage(output, 0, 0, width, height);

140
!?
I want to draw lots of repeated
shapes as fast as possible

141
142
Offscreen Buffers

var offscreen = document.createElement(“canvas”);


offscreen.width = 100;
offscreen.height = 100;

var offscreenContext = offscreen.getContext(“2d”);


drawHeart(offscreenContext, 100, 100);

143
144
Offscreen Buffers

var offscreen = document.createElement(“canvas”);


offscreen.width = 100;
offscreen.height = 100;

var offscreenContext = offscreen.getContext(“2d”);


drawHeart(offscreenContext, 100, 100);

145
Offscreen Buffers

var offscreen = document.createElement(“canvas”);


offscreen.width = 100;
offscreen.height = 100;

var offscreenContext = offscreen.getContext(“2d”);


drawHeart(offscreenContext, 100, 100);

146
Offscreen Buffers

var offscreen = document.createElement(“canvas”);


offscreen.width = 100;
offscreen.height = 100;

var offscreenContext = offscreen.getContext(“2d”);


drawHeart(offscreenContext, 100, 100);

mainContext.drawImage(offscreen, x, y);

147
!?
I want to save my canvas
image, or let the user save it

148
Getting a URL for the Image Data

var imageAsString = canvas.toDataURL(“image/png”);

149
Getting a URL for the Image Data
Now what?
• You have a string that you could…
■ place in local storage
■ send back to a server

■ use as the src attribute for a new <img> element

150
Demo

151
What You Will Learn

Basic Concepts with Canvas and SVG

Animation and Interactivity

Tips and Special Effects

152
What You Have Learnt

Basic Concepts with Canvas and SVG

Animation and Interactivity

Tips and Special Effects

153
Wrapping Up

154
And The Winner Is…

155
156
Related Sessions

Nob Hill
iBooks: Create Beautiful Books with HTML5, CSS3 and EPUB Wednesday 2:00 PM

Marina
What’s New in CSS Effects and Animations Wednesday 4:30 PM Next!

157
Labs

Internet and Web Lab


Safari on iOS Open Lab Thursday 9:00 AM

Internet and Web Lab


CSS Effects Lab Thursday 9:00 AM

158
More Information

Vicki Murley
Safari Technologies Evangelist
[email protected]

Other Resources
http://developer.apple.com/safari
http://www.w3.org/TR/html5
http://www.w3.org/Graphics/SVG

Apple Developer Forums


http://devforums.apple.com

159
Q&A

160
161

You might also like