SlideShare a Scribd company logo
1 of 40
Download to read offline
Satoshi Ueyama




2009   5   31
2009   5   31
Canvas


                Javascript




                        •
                        •
                        •    DIV



2009   5   31
Twitter bot




                Twitter




2009   5   31
Twitter bot




2009   5   31
Canvas?


           •        Google App Engine

                •
                •




2009   5   31
Canvas?

           •    Google App Engine

                •
                •          API




2009   5   31
Canvas?

           •    Google App Engine

                •
                •          API




2009   5   31
Canvas?

           •
           •
           •    ImageMagick




2009   5   31
Canvas?
           •
                Flash


           •
           •
           •
           •
2009   5   31
2009   5   31
2009   5   31
•
           •
           •    ……




                 excanvas



2009   5   31
IE      Canvas
           •    IE   Acid2

           •
           •




2009   5   31
2009   5   31
3D on 2D Canvas


                     Adobe MAX 2009




                Canvas                ……
                     3D

2009   5   31
3D on 2D Canvas
                    2D Context      3D




                http://gyu.que.jp/jscloth/




2009   5   31
Canvas 2D API


       texture

                                 • save
                                  • transform
                                  • clip path
                                 • restore

  canvas
2009   5   31
Canvas 2D API




                                • save
                                 • transform
                                 • clip path
                                • restore

  canvas
2009   5   31
Canvas 2D API




                                • save
                                 • transform
                                 • clip path
                                • restore

  canvas
2009   5   31
Canvas 2D API




                                • save
                                 • transform
                                 • clip path
                                • restore

  canvas
2009   5   31
Canvas 2D API




                                • save
                                 • transform
                                 • clip path
                                • restore

  canvas
2009   5   31
js touch




2009   5   31
js touch

           •
           •
           •




2009   5   31
Canvas 2D API




           •
           •    Flash10, Direct3D, OpenGL

           •    Canvas !        2D API       …

2009   5   31
2009   5   31
• Opera 3D Canvas
                • Mozilla 3D Canvas
                • Google O3D
2009   5   31
Opera 3D Canvas


           •
           •                          API


                Opera Labs




2009   5   31
2009   5   31
Opera 3D Canvas
                    js touch




2009   5   31
Opera 3D Canvas
                    js touch




2009   5   31
Opera 3D Canvas




2009   5   31
O3D

           •      (IE, Firefox, Safari Chrome)

           •                API

           •    Canvas            object




2009   5   31
2009   5   31
O3D



2009   5   31
Gecko 3D Canvas


           •    Firefox 3.5

           •    OpenGL ES 2.0    JS




2009   5   31
2009   5   31
Firefox 3D Canvas


                •   OpenGL ES

                •                                   ……




2009   5   31
• Opera
                • Gecko
                • O3D     …




2009   5   31
Thank You.


                Canvas



                     3D Canvas




2009   5   31

More Related Content

Similar to Mozilla Party 2009 Canvas Programming

04 The Papyrus tool as an Eclipse UML2-modeling environment for requirements
04 The Papyrus tool as an Eclipse UML2-modeling environment for requirements04 The Papyrus tool as an Eclipse UML2-modeling environment for requirements
04 The Papyrus tool as an Eclipse UML2-modeling environment for requirements
Walid Maalej
 
CanvasGL, a GPU-accelerated WebKit
CanvasGL, a GPU-accelerated WebKitCanvasGL, a GPU-accelerated WebKit
CanvasGL, a GPU-accelerated WebKit
company100inc
 
Introducing canvas gl (company100)
Introducing canvas gl (company100)Introducing canvas gl (company100)
Introducing canvas gl (company100)
company100inc
 
Maya HTT NX CAD Assoc Fluid Domains
Maya HTT NX CAD Assoc Fluid DomainsMaya HTT NX CAD Assoc Fluid Domains
Maya HTT NX CAD Assoc Fluid Domains
Dora Smith
 

Similar to Mozilla Party 2009 Canvas Programming (15)

Eva glass film
Eva glass filmEva glass film
Eva glass film
 
Cloudera Desktop
Cloudera DesktopCloudera Desktop
Cloudera Desktop
 
GIMP Introduction Keynote
GIMP Introduction Keynote GIMP Introduction Keynote
GIMP Introduction Keynote
 
Couchdb
CouchdbCouchdb
Couchdb
 
Integrating with the Photography Ecosystem on Mac OS X
Integrating with the Photography Ecosystem on Mac OS XIntegrating with the Photography Ecosystem on Mac OS X
Integrating with the Photography Ecosystem on Mac OS X
 
04 The Papyrus tool as an Eclipse UML2-modeling environment for requirements
04 The Papyrus tool as an Eclipse UML2-modeling environment for requirements04 The Papyrus tool as an Eclipse UML2-modeling environment for requirements
04 The Papyrus tool as an Eclipse UML2-modeling environment for requirements
 
Tc&Tt
Tc&TtTc&Tt
Tc&Tt
 
CanvasGL, a GPU-accelerated WebKit
CanvasGL, a GPU-accelerated WebKitCanvasGL, a GPU-accelerated WebKit
CanvasGL, a GPU-accelerated WebKit
 
Introducing canvas gl (company100)
Introducing canvas gl (company100)Introducing canvas gl (company100)
Introducing canvas gl (company100)
 
Image Optimization for the Web at php|works
Image Optimization for the Web at php|worksImage Optimization for the Web at php|works
Image Optimization for the Web at php|works
 
MAYA HTT NX ST CAD-CAE Workflows
MAYA HTT NX ST CAD-CAE WorkflowsMAYA HTT NX ST CAD-CAE Workflows
MAYA HTT NX ST CAD-CAE Workflows
 
Maya HTT NX CAD Assoc Fluid Domains
Maya HTT NX CAD Assoc Fluid DomainsMaya HTT NX CAD Assoc Fluid Domains
Maya HTT NX CAD Assoc Fluid Domains
 
Native Handlebars: The future of CMS templating
Native Handlebars: The future of CMS templatingNative Handlebars: The future of CMS templating
Native Handlebars: The future of CMS templating
 
Weiss in Singapore on Mobile 2.0 & UX Trends 2009
Weiss in Singapore on Mobile 2.0 & UX Trends 2009Weiss in Singapore on Mobile 2.0 & UX Trends 2009
Weiss in Singapore on Mobile 2.0 & UX Trends 2009
 
DLW Europe - JavaScript Tooling
DLW Europe - JavaScript ToolingDLW Europe - JavaScript Tooling
DLW Europe - JavaScript Tooling
 

Recently uploaded

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Recently uploaded (20)

[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 

Mozilla Party 2009 Canvas Programming