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

Eva glass film
Eva glass filmEva glass film
Eva glass filmEva Glass
 
GIMP Introduction Keynote
GIMP Introduction Keynote GIMP Introduction Keynote
GIMP Introduction Keynote Htoo Tay Zar
 
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 Xfraserspeirs
 
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 requirementsWalid Maalej
 
CanvasGL, a GPU-accelerated WebKit
CanvasGL, a GPU-accelerated WebKitCanvasGL, a GPU-accelerated WebKit
CanvasGL, a GPU-accelerated WebKitcompany100inc
 
Introducing canvas gl (company100)
Introducing canvas gl (company100)Introducing canvas gl (company100)
Introducing canvas gl (company100)company100inc
 
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|worksStoyan Stefanov
 
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 WorkflowsDora Smith
 
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 DomainsDora Smith
 
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 templatingJörg Von Frantzius
 
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 2009Scott Weiss
 
DLW Europe - JavaScript Tooling
DLW Europe - JavaScript ToolingDLW Europe - JavaScript Tooling
DLW Europe - JavaScript ToolingFabian Jakobs
 

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

Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...apidays
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfOverkill Security
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
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.pdfsudhanshuwaghmare1
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
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 WorkerThousandEyes
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
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...Miguel Araújo
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 

Recently uploaded (20)

Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
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
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
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
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
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...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 

Mozilla Party 2009 Canvas Programming