1 Canvas Tag In JavaScript Amy Luong Yan Ge Hon Yee Regneel Prahalad Michael Leggio

2 Topics of Discussion What is the Canvas tag? What is the Canvas tag? History History Advantages/Disadvantages Advantages/Disadvantages The Future/Who is using it ? The Future/Who is using it ? Working Demo and Mechanics Working Demo and Mechanics

3 What do these graphics have in common?

4 What in the world is a Tag?? HTML tag used to create 2D/3D graphics HTML tag used to create 2D/3D graphics Notion of an ”Image that you can paint on" programmatically. Notion of an ”Image that you can paint on" programmatically. Scripting language (Javascript) is used Scripting language (Javascript) is used INTERACTIVE INTERACTIVE Allows for DYNAMICALLY generated graphics in real-time Allows for DYNAMICALLY generated graphics in real-time Graphs, Animations, Images Graphs, Animations, Images

5 GAMES!! GAMES!! Richer client-side web apps Richer client-side web apps Smaller, Leaner, Faster! Smaller, Leaner, Faster! More integrated in your environment More integrated in your environment What in the world is a Tag??

6 History Of The Canvas Tag History Of The Canvas Tag Originally introduced by Apple computer, Inc Originally introduced by Apple computer, Inc First implemented in Mac OS X 10.4(Tiger) First implemented in Mac OS X 10.4(Tiger) Dashboard (WIDGETS) Dashboard (WIDGETS)

7 Apple Safari browser Apple Safari browser Mozilla and Firefox(Gecko) Mozilla and Firefox(Gecko) The element is part of the WhatWG Web applications 1.0 specification (HTML 5). The element is part of the WhatWG Web applications 1.0 specification (HTML 5). Requirements Requirements Safari 2+ (April 2005) Safari 2+ (April 2005) Firefox 1.5+ (Nov 2005) Firefox 1.5+ (Nov 2005) Opera 9+ (April 2006) <-- 7 months ago Opera 9+ (April 2006) <-- 7 months ago

8 Hey! What about IE? Why no Internet Explorer? Why no Internet Explorer? Not natively supported by IE Not natively supported by IE Microsoft 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 add the canvas abilities to IE. GOOGLE is currently involved in a project to add the canvas abilities to IE.

9 Advantages Ease of use Ease of use It is simply a markup tag that is embedded in html, and uses the same attributes as the image tag (with the exception of the src attribute). It is simply a markup tag that is embedded in html, and uses the same attributes as the image tag (with the exception of the src attribute). Small learning curve Small learning curve Little to no cost for training. Little to no cost for training. Implementable immediately Implementable immediately

10 Advantages Low cost Low cost Open source Open source No need to purchase more expensive packages such as Flash, Shockwave, Lightwave, Maya, etc. No need to purchase more expensive packages such as Flash, Shockwave, Lightwave, Maya, etc. Implements both static displays (graphs) and dynamic displays (animations, visualizations, and games). Implements both static displays (graphs) and dynamic displays (animations, visualizations, and games). Comes with a context (rotation, location, transformation), and a number of built-in methods. Comes with a context (rotation, location, transformation), and a number of built-in methods. Allows for rapid alterations of a scene without resorting to the costly DOM manipulation. Allows for rapid alterations of a scene without resorting to the costly DOM manipulation. Makes it possible to compose complex shapes Makes it possible to compose complex shapes

11 Advantages Has both 2D and 3D rendering capabilities. Has both 2D and 3D rendering capabilities. 3D capabilities of the tag are a very recent development. Such a tag brings us back to one of the original promises of web-based 3D, that is, it can be handled as easily as HTML. 3D capabilities of the tag are a very recent development. Such a tag brings us back to one of the original promises of web-based 3D, that is, it can be handled as easily as HTML. Offers the opportunity for developers not familiar with higher-end graphics tools to add graphical texture to their pages. Offers the opportunity for developers not familiar with higher-end graphics tools to add graphical texture to their pages.

12 Disadvantages The entire page must be redrawn when a change is made. The entire page must be redrawn when a change is made. Code can be quite extensive without the use of libraries. Code can be quite extensive without the use of libraries. The Canvas context lacks support for text rendering. The Canvas context lacks support for text rendering.

13 Disadvantages Limited browser support (currently Firefox 1.5 and Safari Limited browser support (currently Firefox 1.5 and Safari There are packages that provide workarounds for this in IE. There are packages that provide workarounds for this in IE. Unlike SVG (Scalable Vector Graphics), canvas supports only one primitive shape, which is the rectangle. All other shapes must be created by combining one or more path. Unlike SVG (Scalable Vector Graphics), canvas supports only one primitive shape, which is the rectangle. All other shapes must be created by combining one or more path.SVG

14 Future/Who’s Using Due to increasing demand we will likely see the addition of text rendering capabilities, as well as a much broader scope of browser support. Due to increasing demand we will likely see the addition of text rendering capabilities, as well as a much broader scope of browser support. Currently being used at the grass roots level of the web development community Currently being used at the grass roots level of the web development community However with Google now on board and a working group having been created to establish standards, this will very likely change. However with Google now on board and a working group having been created to establish standards, this will very likely change.

15 “The trend is clear: smaller, leaner, faster to startup, more integrated in your environment (means real event interoperation with the page!), easier for DHTML designers to understand. This leads me to think that is going to be huge. “ “The trend is clear: smaller, leaner, faster to startup, more integrated in your environment (means real event interoperation with the page!), easier for DHTML designers to understand. This leads me to think that is going to be huge. “ “Thank you, little tag, you'll be teaching a lot of lessons to a lot of people and you'll be making my rich- webapp-developer life easier.” “Thank you, little tag, you'll be teaching a lot of lessons to a lot of people and you'll be making my rich- webapp-developer life easier.” It's the tag, over again: "simplest thing that can possibly work" vs. "design by committee". It's the tag, over again: "simplest thing that can possibly work" vs. "design by committee". Future/ Who's Using A Blogger's Point of View Stefano Mazzocchi

16 Basic Canvas Drawing Functions Drawing a Rectangle fillRect(x,y,width,height) : Draws a filled rectangle Drawing a Rectangle fillRect(x,y,width,height) : Draws a filled rectangle Drawing a Line lineTo(x, y); Drawing Angles arc(x, y, radius, startAngle, endAngle, anticlockwise) Drawing a Quadractic Curve quadraticCurveTo(cp1x, cp1y, x, y)

17 Simple Example canvas.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();

18 Implementation function draw(){ var canvas = document.getElementById('myCanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.beginPath(); …. } }

19 Implementation Specifying Style Specifying Style canvas { border: 1px solid black; } canvas { border: 1px solid black; }</style> Canvas tag in HTML: Canvas tag in HTML: This is my canvas This is my canvas </BODY>

20

21 Business Example Canvas can serve as a great tool for the visualization of corporate data.

22 Fun Canvas Examples 3D first person shooter ape/ 3D first person shooter ape/ ape/ ape/ 3D boxes 3D boxes stic_beta_1/eg/boxes.html stic_beta_1/eg/boxes.html Painting Painting

23 End