11

Canvas Tag In Canvas Tag In JavaScriptJavaScript

Amy LuongAmy LuongYan GeYan GeHon YeeHon YeeRegneel Regneel PrahaladPrahalad

Michael LeggioMichael Leggio

22

Topics of DiscussionTopics of Discussion

What is the Canvas tag?What is the Canvas tag?HistoryHistoryAdvantages/DisadvantagesAdvantages/DisadvantagesThe Future/Who is using The Future/Who is using

it ?it ?Working Demo and Working Demo and

MechanicsMechanics

33

What do these graphics have in What do these graphics have in common?common?

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

44

What in the world is a <Canvas> What in the world is a <Canvas> Tag??Tag??

HTML tag used to create 2D/3D graphicsHTML tag used to create 2D/3D graphicsNotion of an ”Image that you can paint Notion of an ”Image that you can paint

on"  programmatically.on"  programmatically.Scripting language (Javascript) is used Scripting language (Javascript) is used INTERACTIVEINTERACTIVEAllows for DYNAMICALLY generated Allows for DYNAMICALLY generated

graphics in real-timegraphics in real-timeGraphs, Animations, ImagesGraphs, Animations, Images

55

      GAMES!!GAMES!!

Richer client-side web Richer client-side web appsapps

Smaller, Leaner, Faster!Smaller, Leaner, Faster!More integrated in  your More integrated in  your

environmentenvironment

What in the world is a <Canvas> What in the world is a <Canvas> Tag??Tag??

66

History Of The Canvas History Of The Canvas Tag  Tag  

Originally introduced by Apple computer, IncOriginally introduced by Apple computer, IncFirst implemented in Mac OS X 10.4(Tiger)  First implemented in Mac OS X 10.4(Tiger)  Dashboard (WIDGETS)Dashboard (WIDGETS)

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

77

Apple Safari browserApple Safari browserMozilla and Firefox(Gecko)Mozilla and Firefox(Gecko)The <canvas> element is part of the The <canvas> element is part of the

WhatWG Web  applications 1.0 WhatWG Web  applications 1.0 specification (HTML 5).specification (HTML 5).

RequirementsRequirementsSafari 2+          (April 2005)Safari 2+          (April 2005)Firefox 1.5+      (Nov 2005)Firefox 1.5+      (Nov 2005)Opera 9+          (April 2006) <-- 7 Opera 9+          (April 2006) <-- 7

months agomonths ago

88

Hey! What about IE? Hey! What about IE?

Why no Internet Explorer?Why no Internet Explorer?Not natively supported by IENot natively supported by IEMicrosoft does not comply with WhatWG Microsoft does not comply with WhatWG Only with WC3.Only with WC3.

GOOGLE is currently involved in a project to GOOGLE is currently involved in a project to add the canvas abilities to IE.add the canvas abilities to IE.

              http://sourceforge.net/projects/excanvashttp://sourceforge.net/projects/excanvas

99

AdvantagesAdvantages

Ease of useEase of use It is simply a markup tag that is It is simply a markup tag that is

embedded in html, and uses the same embedded in html, and uses the same attributes as the image tag (with the attributes as the image tag (with the exception of the src attribute).exception of the src attribute).

Small learning curveSmall learning curveLittle to no cost for training.Little to no cost for training. Implementable immediately Implementable immediately

1010

AdvantageAdvantagess

Low costLow cost Open sourceOpen source No need to purchase more expensive No need to purchase more expensive

packages such as Flash, Shockwave, packages such as Flash, Shockwave, Lightwave, Maya, etc.Lightwave, Maya, etc.

Implements both static displays (graphs) and Implements both static displays (graphs) and dynamic displays (animations, visualizations, dynamic displays (animations, visualizations, and games). and games).

Comes with a context (rotation, location, Comes with a context (rotation, location, transformation), and a number of built-in transformation), and a number of built-in methods.methods. Allows for rapid alterations of a scene Allows for rapid alterations of a scene

without resorting to the costly DOM without resorting to the costly DOM manipulation. manipulation.

Makes it possible to compose complex Makes it possible to compose complex shapesshapes

1111

AdvantagesAdvantages

Has both 2D and 3D rendering Has both 2D and 3D rendering capabilities. capabilities. 3D capabilities of the <canvas> tag are a 3D capabilities of the <canvas> tag are a

very recent development. Such a tag brings very recent development. Such a tag brings us back to one of the original promises of us back to one of the original promises of web-based 3D, that is, it can be handled as web-based 3D, that is, it can be handled as easily as HTML.easily as HTML.

Offers the opportunity for developers not Offers the opportunity for developers not familiar with higher-end graphics tools to add familiar with higher-end graphics tools to add graphical texture to their pages.graphical texture to their pages.

1212

DisadvantagesDisadvantages

The entire page must be redrawn when a The entire page must be redrawn when a change is made. change is made.

Code can be quite extensive without the use of Code can be quite extensive without the use of libraries.libraries.

The Canvas context lacks support for text The Canvas context lacks support for text rendering.rendering.

1313

DisadvantagesDisadvantages

Limited browser support (currently Firefox Limited browser support (currently Firefox 1.5 and Safari1.5 and Safari There are packages that provide workarounds There are packages that provide workarounds

for this in IE.for this in IE.

Unlike Unlike SVGSVG (Scalable Vector Graphics), (Scalable Vector Graphics), canvas supports only one primitive shape, canvas supports only one primitive shape, which is the rectangle. All other shapes which is the rectangle. All other shapes must be created by combining one or more must be created by combining one or more path.path.

1414

Future/Who’s UsingFuture/Who’s Using

Due to increasing demand we will likely see Due to increasing demand we will likely see the addition of text rendering capabilities, as the addition of text rendering capabilities, as well as a much broader scope of browser well as a much broader scope of browser support.support.

Currently being used at the grass roots level Currently being used at the grass roots level of the web development communityof the web development community However with Google now on board and a However with Google now on board and a

working group having been created to establish working group having been created to establish standards, this will very likely change.standards, this will very likely change.

1515

““The trend is clear: smaller, leaner, faster to startup, The trend is clear: smaller, leaner, faster to startup, more integrated in your environment (means real more integrated in your environment (means real event interoperation with the page!), easier for event interoperation with the page!), easier for DHTML designers to understand. This leads me to DHTML designers to understand. This leads me to think that <canvas> is going to be huge. “think that <canvas> is going to be huge. “

““Thank you, little <canvas> tag, you'll be teaching a Thank you, little <canvas> tag, you'll be teaching a lot of lessons to a lot of people and you'll be making lot of lessons to a lot of people and you'll be making my rich-webapp-developer life easier.”my rich-webapp-developer life easier.”

It's the <img> tag, over again: "simplest thing that It's the <img> tag, over again: "simplest thing that can possibly work" vs. "design by committee".can possibly work" vs. "design by committee".

Future/ Who's UsingA Blogger's Point of View

Stefano Mazzocchi

1616

Basic Canvas Drawing Basic Canvas Drawing FunctionsFunctions

Drawing a Rectangle Drawing a Rectangle fillRect(x,y,width,height) : Draws a filled rectanglefillRect(x,y,width,height) : Draws a filled rectangle

Drawing a Line Drawing a Line lineTo(x, y); lineTo(x, y);

Drawing Angles Drawing Angles arc(x, y, radius, startAngle, endAngle, arc(x, y, radius, startAngle, endAngle, anticlockwise) anticlockwise)

Drawing a Quadractic Curve Drawing a Quadractic Curve quadraticCurveTo(cp1x, cp1y, x, y) quadraticCurveTo(cp1x, cp1y, x, y)

1717

Simple ExampleSimple Examplecanvas.beginPath();

canvas.arc(75,75,50,0,Math.PI*2,true); // Outer circle

canvas.moveTo(110,75);

canvas.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)

canvas.moveTo(65,65);

canvas.arc(60,65,5,0,Math.PI*2,true); // Left eye

canvas.moveTo(95,65);

canvas.arc(90,65,5,0,Math.PI*2,true); // Right eye

canvas.stroke();

1818

ImplementationImplementation  <script type="text/javascript">

function draw(){

var canvas = document.getElementById('myCanvas');

if (canvas.getContext){ var ctx = canvas.getContext('2d');

canvas.beginPath(); ….

} }

</script>

1919

ImplementationImplementationSpecifying StyleSpecifying Style

<style type="text/css"> <style type="text/css">      canvas { border: 1px solid black; }      canvas { border: 1px solid black; }

</style></style>

Canvas tag in HTML: Canvas tag in HTML: <BODY onload="draw();"> <BODY onload="draw();">

<h1>This is my canvas</h1> <h1>This is my canvas</h1> <canvas id="myCanvas" width="172"<canvas id="myCanvas" width="172"

height="172"></canvas>height="172"></canvas></BODY> </BODY>

2020

2121

Business ExampleBusiness ExampleCanvas can serve as a great tool for the visualization of corporate data.

2222

Fun Canvas ExamplesFun Canvas Examples 3D first person shooter 3D first person shooter

http://www.abrahamjoffe.com.au/ben/cahttp://www.abrahamjoffe.com.au/ben/canvascape/nvascape/

3D boxes 3D boxes

http://matt.west.co.tt/files/canvastastic/canhttp://matt.west.co.tt/files/canvastastic/canvastastic_beta_1/eg/boxes.htmlvastastic_beta_1/eg/boxes.html

Painting Painting http://http://caimansys.comcaimansys.com/painter/ /painter/

2323

EndEnd