17. Objectivation
• DOM Elements can be handled separately.
However objects cannot be handled
separately in HTML5 Canvas
DOM Elements have regions each Canvas draw object to one Context
18. Objectivation
Objects that contain the necessary information is required
when drawing
Canvas
19. Objectivation
• Contains position and properties for
display.
var oItem = new Item();
oItem.width = 100;
oItem.height = 100;
oItem.x = 50;
oItem.y = 150;
oItem.color = "#123456";
oItem.visible = true;
22. Animation
• Rendering-Pipeline must be used to tackle
multiple objects simultaneously.
no
Register Is there yes Draw
Initialize updated
Pipeline object? object
one tick cycle
23. Animation
// drawing
function draw() {
// clear canvas
ctx.clearRect(0, 0, ctx.canvas.width,
ctx.canvas.height);
// draw each object.
for (var i = 0; i < list.length; i++) {
list[i].drawEachObject();
}
};
// repeat 60 times per second
setInterval(draw, 1000 / 60);
24. Animation
draw draw draw draw draw
Repeat 60 times per second
25. Why is it repeated 60 times per second?
• Most PC monitors show 60 frames per
second. Therefore, there is no point in
making animation that is 60 FPS.
26. Using requestAnimationFrame
instead of setInterval
• requestAnimationFrame is the browser's native
way of handling animations.
• Helps get a smooth 60 frames per second.
• iOS6 supports requestAnimationFrame.
function draw() {
requestAnimationFrame(draw);
// ...
}
requestAnimationFrame(draw);
28. Clear Canvas
• Using drawRect method
var ctx = elCanvas.getContext("2d");
ctx.fillStyle = "#ffffff";
ctx.drawRect(0, 0, elCanvas.width, elCanvas.height);
It's slow.
• Reset width or height attributes
elCanvas.width = 100;
elCanvas.height = 100;
It's fast on old browser.
29. Clear Canvas
• Using clearRect method
var ctx = elCanvas.getContext(“2d”);
ctx.clearRect(0, 0, elCanvas.width, elCanvas.height);
Fast on most browsers.
30. Sprite Animation
• A Sprite Animation is a two-dimension
image that is integrated into a larger scene
31. Sprite Animation in Canvas
• Using drawImage method
var ctx = elCanvas.getContext("2d");
ctx.drawImage(target Element, sourceX,
sourceY, sourceWidth, sourceHeight,
targetX, targetY, targetWidth,
targetHeight);
Source x,y,width,height Target x,y,width,height
drawImage
32. Pixel Manipulation
• Using different size sources and targets
results in low performance in iOS4. Use
drawImage method with original dimension.
drawImage
Pixel manipulation occurs when using different dimensions
with source.
33. Avoid Floating Coordinates
• When floating point coordinates are used,
anti-aliasing is automatically used to try to
smooth out the lines.
35. Event Processing
• Inspect and see if the location the event occurred is in
each object’s region in order to find objects that are
related to event.
for (var i in list) {
if (
list[i].x <= mouseX &&
mouseX <= list[i].x + list[i].width &&
list[i].y <= mouseY &&
mouseY <= list[i].y + list[i].height
) {
// region of this object contains mouse
point
}
}
36. Event Processing
• The aforementioned method only recognizes objects as
rectangles.
• More detail is needed to detect objects.
37. Event Processing
• getImageData method can be used to get pixel data
var imageData = ctx.getImageData(mouseX,
mouseY, 1, 1);
if (imageData.data[0] !== 0 ||
imageData.data[1] !== 0 ||
imageData.data[2] !== 0 ||
imageData.data[3] !== 0) {
// a pixel is not empty data
}
38. Security with Canvas Element
• Information leakage can occur if scripts from one origin
can access information (e.g. read pixels) from images
from another origin (one that isn't the same).
• The toDataURL(), toBlob(), and getImageData() methods
check the flag and will throw a SecurityError exception
rather than leak cross-origin data.
42. Hardware Acceleration
• Safari in iOS5 and up has GPU accelerated Mobile
Canvas implementation.
• Without GPU Acceleration, mobile browsers generally
have poor performance for Canvas.
43. Using CSS 3D Transforms
• CSS 3D Transforms supports iOS4 and Android 3 and
above.
• Using the following CSS3 style with webkit prefix
.displayObject {
-webkit-transform:translate3d(x,y,z)
scale3d(x, y, z) rotateZ(deg);
-wekit-transform-origin:0 0;
-webkit-transform-style:preserve-3d;
}
44. Sprite Animation in DOM
• A child image element is needed to use only the CSS 3D
Transforms.
overflow:hidden
DIV
IMG
49. Performance different on each device
• iOS4 supports CSS 3D Transforms with
Hardware Acceleration(H/A)
• iOS5 supports Canvas with H/A
• There is no solution on Anroid 2.x devices.
• Androind ICS supports CSS 3D
Transforms with H/A
50. Choose Rendering method
under over
Device/ iPhone iPhone iPhone
Android Android
OS 3GS 4 4S
3 3
CSS3D
(under iOS4) Canvas
Rendering
CSS3D Canvas or CSS3D
Method
Canvas DOM
(over iOS5)
51. Be careful using Android CSS 3D Transforms
• Unfortunately, Android ICS has many bugs associated
with CSS 3D Transforms
• The image turns black if an image that has a dimension
of over 2048 pixels is used.
• When an element that has a CSS overflow attribute with
a hidden value is rotated, then that hidden area becomes
visible.
52. Need to optimize detailed
• Tick occurs 60 times per second.
• If 100 objects are made, a logic in drawing object occurs
6,000 times per second.
56. Collie
• Collie is a high performance animation library for
javascript
• Collie supports more than 13 mobile devices
and PCs with its optimized methods.