This document describes Canscape, a canvas-based presentation tool developed using Scalable Vector Graphics (SVG) and JavaScript. Unlike traditional slide-based tools, Canscape allows presenting information on a large canvas without page boundaries. It utilizes open standards like SVG and is platform agnostic, requiring only a web browser to view and edit presentations. Key features include panning, zooming, rotating elements, and adding callouts to "hot spots". The tool aims to improve upon issues with slide-based tools and allow for a more flexible presentation flow.

1. Canvas Based Presentation
Using SVG and Javascript
Arvind Krishnaa J (01145595)
Srikrishnan S (01153688)
Final Year, Department of CSE
SSN College of Engineering, Chennai

2. Presentation Paradigms
• Information is organized into slides
• Each slide typically consists of a
list of bulleted points
• Eg., Microsoft PowerPoint,
OpenOffice Impress etc.
Slide
Based
• The material to be presented is laid
out in a large canvas without any
page (slide) boundaries
• View can change orientation to suit
the information to be presented
Canvas
Based

3. Why not the Slide Based Paradigm?
• Features can be
complicated to use
• Tendency to skip slides
– leads to distract the
audience
• Single pre-set path
• Presence of content
creator is not critical
during the presentation

4. Edward Tufte’s Views
• Slide-ware reduces the
analytical quality of
presentations
• Bullets are just raw facts
listed point-wise
• Abuse of graphical
technique
• Suggests the use of web
browser as a
presentation tool
He is noted for his writings
on information design and as a
pioneer in the field of data
visualization
Edward Tufte

5. Why Canvas Based Paradigm?
• Reflects the
presenter’s flow of
thought process
• Emphasis more on
the central idea.
• Audience
concentrate better
• Animations and other
rich form of
multimedia
• Presentation never
seems monotonous
• Tweaked to the
level of detail the
presenter wants to
express
Flexibility Attractive
FlowFocus

6. Prezi – A Canvas Presentation Tool
• Canvas based presentation
software developed using
Flash™
• Ideas explored on a
virtual canvas
• Zooming in and out of
presentation media (ZUI)
• Text, images, videos can
be grouped together as
frames

7. Canscape – Our Canvas
Presentation Tool
SVG
• Animates the presentation
elements
• Open standard
• Supported by modern browsers
JavaScript
• Programmatically manipulate the
components of the presentation
Web
Browser
• View and edit presentation
contents

8. Scalable Vector Graphics (SVG)
• Language for describing two-
dimensional graphics in XML.
• Three types of graphic objects
– Vector graphic shapes
– Images
– Text
• Objects can be grouped, styled,
transformed and composited
“Vector graphics is more flexible
than raster graphics”
Web
Browsers

9. jQuery SVG
• Written as a plugin to jQuery library
• Lets you interact with an SVG canvas
• Advantages
– Provides native access to the elements
– Has an extensible architecture - Plugins can be added
– Suitable for complex implementations
• Code can be easily written if SVG elements and
its attributes are known
• Used exhaustively for implementation

10. Salient Features of Canscape
• Utilizes Free and Open source technologies
• Platform Agnostic
• Requires only a web browser
• Easy to use UI – Takes only a little effort to learn

11. Canscape Functionalities
• Pan – Shift viewport across a plane
• Zoom – Show contents at a greater depth
• Rotate – Change the orientation of elements
• Callouts – Add description to ‘hot spots’ on
contents
• Multiple workspaces
• Save work – Save file and edit later

12. Editing
Set
Presentation
Path
Presentation Exit
CloseExport
Edit
Start
Save
Workflow

13. Screenshots
Canscape – User Interface

14. Screenshots
Sample presentation with callouts

15. Social Impact
Impact on Pedagogy
• Innovative teaching aid
• Audience attention captured better
• Easy organization of ideas
• Better presentation flow
• Easy to add animations

16. References
[1] Edward R. Tufte, The Visual Display of Quantitative
Information, Second Edition, Graphics Press LLC, 2001.
[2] W3C Recommendations, Scalable Vector Graphics (SVG)
http://www.w3.org/TR/SVG/
[3] Prezi, a cloud based SaaS presentation software,
http://www.prezi.com
[4] jQuery, a JavaScript library to simplify scripting in HTML,
http://www.jquery.com/
[5] jQuery UI, a jQuery user interface library,
http://www.jqueryui.com/
[6] jQuery SVG, a jQuery plugin to interact with SVG,
http://keithwood.name/svg.html