Transcript HTML5 Canvas
HTML5 Canvas Essentials Steve Fulton & Jeff Fulton
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.
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
• • •
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
• • •
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)
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.
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.
What Is Retained Mode?
• Flash, Silverlight, and DOM
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
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
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
What Can The Canvas Be Used for?
• Nearly anything that Flash notorious for: – Banner Ads – Animated Landing Pages – Web Games – Video
Canvas Banner Ad
• • •
Demo
Should be put in an
•
Demo Animated Landing Pages
Web Advergame
• • • •
Demo
Targets all HTML5 devices Mobile/Web Touch Controls Only
Video
• •
Demo
Video played • Directly on Canvas Can Create frame counter To trigger events
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)
Why Canvas Instead Of ?
• • • • • 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
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
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
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)
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)
Basic HTML5 Page
• Simplified greatly from HTML4
Basics HTML5 Page
CH1EX1 – Basic HTML Page
Ch1Ex1: Basic Hello World HTML Page Hello World!
CH1EX1.html
•
Demo Canvas Hello World
Canvas Hello World
In the section of the HTML page, you add a tag using code like the following:
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
Canvas Hello World
In the
of your HTML page, start adding JavaScript
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/
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);
Canvas Hello World
After window loads, call start application: Encapsulate Canvas code in it’s own function object: function eventWindowLoaded () { canvasApp(); }
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
Canvas Hello World
Basic Structure Of Canvas App function canvasApp () { if (!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); function draw() {
//all the cool drawing stuff goes here
} draw() }
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.
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);
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
Canvas Hello World
Adding Text: After drawing the boxes, context.fillStyle
is 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
context.font
= "#000000"; = "20px _sans"; context.fillText("Hello world!",195,80 );
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
Canvas Hello World
Adding An Image:
var helloWorldImage = new Image(); helloWorldImage.onload = function () { context.drawImage(helloWorldImage, 160, 130); } helloWorldImage.src = "helloworld.gif";
Canvas Hello World Redux
•
Demo
(again)
Text Mangler
How It Works: Interacting with HTML
• • • Standard HTML
• • • • • 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
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
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
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)
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)
Basic HTML5 Page
• Simplified greatly from HTML4
Basics HTML5 Page
CH1EX1 – Basic HTML Page
CH1EX1.html
•
Demo Canvas Hello World
Canvas Hello World
In the section of the HTML page, you add a tag using code like the following:
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
Canvas Hello World
In the
of your HTML page, start adding JavaScriptCanvas Hello World
• •
Testing for the Canvas Support
We use modernizr.js to test for the Canvas support. Get it here: http://www.modernizr.com/
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);
Canvas Hello World
After window loads, call start application: Encapsulate Canvas code in it’s own function object: function eventWindowLoaded () { canvasApp(); }
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
Canvas Hello World
Basic Structure Of Canvas App function canvasApp () { if (!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); function draw() {
//all the cool drawing stuff goes here
} draw() }
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.
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);
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
Canvas Hello World
Adding Text: After drawing the boxes, context.fillStyle
is 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
context.font
= "#000000"; = "20px _sans"; context.fillText("Hello world!",195,80 );
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
Canvas Hello World
Adding An Image:
var helloWorldImage = new Image(); helloWorldImage.onload = function () { context.drawImage(helloWorldImage, 160, 130); } helloWorldImage.src = "helloworld.gif";
Canvas Hello World Redux
•
Demo
(again)
Text Mangler
How It Works: Interacting with HTML
• • • Standard HTML