HTML5 Canvas Essentials

2. HTML5 Canvas Essentials Steve Fulton & Jeff Fulton

3. Something Cool The Canvas Can Do Demo Easily takes a hidden video from the HTML page, displays it multiple times, moves each copy Independently it around the screen, while playing it.

4. Who Are We? • Steve and Jeff Fulton (twins) • Web developers since 1995 • Worked for Mattel Toys until 2010/2011 on all of their web properties (Barbie, Hot Wheels, etc.) including games apps. MMOs • Have Built over 200 games in Flash, HTML5, Mobile • Authored of The Essential Guide To Flash Games book in 2010 • Authored of HTML 5 Canvas in 2011 • Now both working in independently on mobile, web, multi-player HTML5, Flash, Corona games and apps

5. Why Move From Flash to The Canvas? Our Story • Finished Essential guide To Flash Games in March 2010 • Steve Jobs refused Flash on the iOS just days later • Wanted to find a technology that would be truly multi-platform and not be subject to whims of CEOs

6. Why Move From Flash to The Canvas? Our Story • Easy Tools: a web browser, text editor and JavaScript was all that was required. • The HTML5 Canvas allowed for a bitmapped graphics, much Flash’s bitmapped canvas. • Our specific Type Of Game Development translates well (tile sheets, bitmaps)

7. What is the HTML5 Canvas? • The HTML5 Canvas is an Immediate Mode bit-mapped area of the screen that can be manipulated with JavaScript and CSS.

8. What Is Immediate Mode? • Immediate Mode refers to the way the canvas renders pixels on the screen. The HTML5 Canvas completely redraws the bitmapped screen on every frame using Canvas API calls from JavaScript. As a programmer, your job is to set-up the screen display before each frame is rendered.

9. What Is Retained Mode? • Flash, Silverlight, and DOM <div> manipulation techniques use Retained Mode. In Retained Mode a list of individual display objects is stored and manipulated.

10. HTML5 Canvas Support • Support for the Canvas is growing. Right now we think the best browser support goes in this order: • Chrome • Safari (Mac and iOS 5) • I.E. 9 (surprised?) • Firefox • Opera

11. HTML5 Canvas Support : Mobile • Support and performance has increased in 2011 • iOS 5 improved performance greatly • Current Android performance is poor to good depending on the device • Windows 8/Metro is supposedly built to handle HTML5 Canvas, and we believe that is the reason I.E. 9 ranks so highly right now

12. Canvas And The DOM • DOM : Document Object Model • Canvas is a DOM Object • Accessible via the 2D Canvas context • Has both it’s own properties and CSS properties

13. What Can The Canvas Be Used for? • Nearly anything that Flash notorious for: • Banner Ads • Animated Landing Pages • Web Games • Video

14. Canvas Banner Ad • Demo • Should be put in an <iframe> • PNG sequence but could easily be dynamically generated Canvas text

15. Animated Landing Pages • Demo

16. Web Advergame • Demo • Targets all HTML5 devices • Mobile/Web • Touch Controls Only

17. Video • Demo • Video played Directly on Canvas • Can Create frame counter To trigger events

18. What Is It Not Good For? • Some of Flash’s core competencies : • Heavy, time-line based key-frame animation • Vector motion graphics • Secure, monetizable video • Code/asset encapsulation • Advanced Audio applications • Hard Core Games (at the moment)

19. Why Canvas Instead Of <div>? • Not an either/or situation • Use the best of all the “HTML5” technologies • For Flash AS3 developers, many algorithms translates easily to JavaScript + Canvas • We have already seen Canvas performance improve as browsers improve (iOS5) • GPUs are made to accelerate the display of the bitmaps and 3D images (WebGL) the Canvas can create

20. A Quick Guide To Canvas Development • Next we will describe the Canvas element, its’ properties and methods, then show how to create a simple Canvas application

21. HTML5 Canvas Properties Canvas Has Three Properties: • width • height • id Width and height read/write which means you can resize the Canvas on the fly

22. HTML5 Canvas Methods • getContext() : You need the context to draw anything on the Canvas. We will see this shortly • toDataUrl() : Outputs the bitmapped data of the Canvas to a string (can be used to create a screenshot)

23. HTML5 Canvas And CSS • CSS can be used in conjunction with Canvas object itself. However, individual drawings on the Canvas cannot be manipulated with CSS • Example: you can scale the Canvas using CSS style=”width: 400px; height:400px” • Does not resize but instead scales (like setting width ad height for a Flash embed)

24. Basic HTML5 Page • Simplified greatly from HTML4 <!doctype html> <html lang="en">

25. Basics HTML5 Page CH1EX1 – Basic HTML Page <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ch1Ex1: Basic Hello World HTML Page</title> </head> <body> Hello World! </body> </html> CH1EX1.html

26. Canvas Hello World • Demo

27. Canvas Hello World In the <body> section of the HTML page, you add a <canvas> tag using code like the following: <canvas id="canvasOne" width="500" height="300"> Your browser does not support the HTML 5 Canvas. </canvas>

28. Canvas Hello World • Setting up your Canvas app structure is very important to get started. • The next section is code heavy, but we believe it is important to get a code structure down that you can use for your apps • Our structure is not the only way to do it

29. Canvas Hello World In the <HEAD> of your HTML page, start adding JavaScript <head> <script type="text/javascript"> //Canvas Code Goes Here </script> </head>

30. Canvas Hello World Testing for the Canvas Support • We use modernizr.js to test for the Canvas support. • Get it here: http://www.modernizr.com/ <script src="modernizr.js"></script> <script type="text/javascript"> function canvasSupport () { return Modernizr.canvas; } </script>

31. Canvas Hello World We need to wait For the Browser Window To Finish Loading so we can be sure all of the JavaScript is available. window.addEventListener("load", eventWindowLoaded, false);

32. Canvas Hello World After window loads, call start application: Encapsulate Canvas code in it’s own function object: function eventWindowLoaded () { canvasApp(); }

33. Basic Structure of Canvas Object • Test For Canvas Support • Get a reference to the Canvas object on the HTML page • Get reference to the Canvas 2D context from the Canvas object • Create a stub function used to draw onto the Canvas

34. Canvas Hello World Basic Structure Of Canvas App function canvasApp () { if (!canvasSupport()) { return; } vartheCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); function draw() { //all the cool drawing stuff goes here } draw() }

35. Canvas Hello World • Draw filled box as the background • Draw “stroke” box as the border • We need the Canvas context to draw anything • Since we are drawing in immediate mode, we set Canvas context properties one at a time to draw different objects.

36. Canvas Hello World Background: yellow box, black outline context.fillStyle= "#ffffaa"; context.fillRect(0, 0, 500, 300); context.strokeStyle= "#000000"; context.strokeRect(5, 5, 490, 290);

37. Canvas Hello World • The background is drawn first. • Since there is no concept of a “display list” in immediate mode, we need to make sure to draw things in the order we want them stacked (i.e. background first, text second) • Advanced: globalCompositeOperation property of the context can be manipulated for layering purposes

38. Canvas Hello World Adding Text: After drawing the boxes, context.fillStyleis updated with a new color. Think of this like a hand (context) with a crayon. There is only one hand to draw with, so you swap out the crayon (fillStyle) and draw the text. context.fillStyle= "#000000"; context.font = "20px _sans"; context.fillText("Hello world!",195,80 );

39. Canvas Hello World • Adding an image: • Use JavaScript Image() object to load and reference an image • Use context.drawImage(imageRef, x,y) to draw it on the Canvas

40. Canvas Hello World Adding An Image: varhelloWorldImage = new Image(); helloWorldImage.onload= function () { context.drawImage(helloWorldImage, 160, 130); } helloWorldImage.src = "helloworld.gif";

41. Canvas Hello World Redux • Demo (again)

42. Text Mangler

43. How It Works: Interacting with HTML • Standard HTML <form> elements • JavaScript “change” events to call functions • Draw() function called to re-render

44. Text Mangler • Demo (apply to more than text) • Text : context.font = “64px italic bold _sans” • Resize : (canvas.width, canvas.height) • Scale : style=”width:xxx; height:xxx;” (warning!) • Alpha : (context.globalAlpha) • Gradient Fills (context.createLinearGradient()) • Shadows : (context.shadowColor ) • Screen Shot: canvas.toDataUrl()

45. Simple Animation • To animate you need to call a function on an interval to update the Canvas • Drawing objects (circle, boxes), bitmapped images, and video all need to be updated on every frame to animate/play

46. Simple Animation • Let’s use a tile sheet of a tank and animateit driving across the screen. • This uses a PNG file set as a tile sheet, and interval, and some code change the position of the tank on the Canvas

47. Simple Animation • Let’s use a tile sheet of a tank and animateit driving across the screen. • This uses a PNG file set as a tile sheet, and interval, and some code change the position of the tank on the Canvas

48. Simple Animation • The Tile Sheet looks like this

49. Simple Animation Demo

50. Simple Animation Steps: • First we load in the tile sheet vartileSheet=new Image(); tileSheet.addEventListener('load', eventShipLoaded false); tileSheet.src="tanks_sheet.png"; 2. Next we set up an array of fames from the tile sheet for the tank track varanimationFrames=[1,2,3,4,5,6,7,8]; 3. We create an index to use to specify which frame we are to draw varframeIndex=0;