SlideShare une entreprise Scribd logo
1  sur  23
Télécharger pour lire hors ligne
 All Text Tricks in the Book, with JavaScript and Canvas
Html5 Canvas
What? Where? When?
Use Cases
• Loaders / Splash Screens

• Games, full screen apps
• Light Boxes
• Responsive layouts, only show on big screens
• Demos ;)
Canvas Text API
The Definitive guide
 All Text Tricks in the Book, with JavaScript and Canvas
That’s it
Demo time?!
Formatting
• Multiline

• Nope

• Kerning

• Nope

…but this is probably a good thing.
Transforms
• rotate(radian)

• translate(x , y)
• scale(x, y)
• setTransform(xScale, xSkew, ySkew, yScale, x ,y )
Animating blocks
Performance
How many particles?
 All Text Tricks in the Book, with JavaScript and Canvas
 All Text Tricks in the Book, with JavaScript and Canvas
Bitmaps
• drawImage()
• getImageData()

• putImageData()
• toDataURL()
 All Text Tricks in the Book, with JavaScript and Canvas
Text Height?
Marching Squares
Circular Wander
Snow man
Circular Wander Text
 All Text Tricks in the Book, with JavaScript and Canvas
Codepen.io
Codepen.io/sakri
 All Text Tricks in the Book, with JavaScript and Canvas

Contenu connexe

En vedette

CSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the BackendCSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the BackendFITC
 
Making Mixed Reality Living Spaces
Making Mixed Reality Living SpacesMaking Mixed Reality Living Spaces
Making Mixed Reality Living SpacesFITC
 
Building Apps with Ember
Building Apps with EmberBuilding Apps with Ember
Building Apps with EmberFITC
 
Web unleashed 2015-tammyeverts
Web unleashed 2015-tammyevertsWeb unleashed 2015-tammyeverts
Web unleashed 2015-tammyevertsFITC
 
Building Real Time, Open-Source Tools for Wikipedia
Building Real Time, Open-Source Tools for WikipediaBuilding Real Time, Open-Source Tools for Wikipedia
Building Real Time, Open-Source Tools for WikipediaFITC
 
Brain Hacks
Brain HacksBrain Hacks
Brain HacksFITC
 
Prolific Minded
Prolific MindedProlific Minded
Prolific MindedFITC
 
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015FITC
 
Creating Content that Captivates
Creating Content that CaptivatesCreating Content that Captivates
Creating Content that CaptivatesFITC
 
Glass w/o Glass: Developing native Glass applications without the hardware w...
 Glass w/o Glass: Developing native Glass applications without the hardware w... Glass w/o Glass: Developing native Glass applications without the hardware w...
Glass w/o Glass: Developing native Glass applications without the hardware w...FITC
 
Responsive Design, Past, Present and Future
Responsive Design, Past, Present and FutureResponsive Design, Past, Present and Future
Responsive Design, Past, Present and FutureFITC
 
Getting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernGetting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernFITC
 
Things To Keep In Mind When Working In The World Of Responsive Design
Things To Keep In Mind When Working In The World Of Responsive DesignThings To Keep In Mind When Working In The World Of Responsive Design
Things To Keep In Mind When Working In The World Of Responsive DesignFITC
 
How long does it take to write a name?
How long does it take to write a name?How long does it take to write a name?
How long does it take to write a name?Caroline McGregor, CSM
 
Networking, Selling and Pitching
Networking, Selling and PitchingNetworking, Selling and Pitching
Networking, Selling and PitchingFITC
 
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014Michael Chaize
 
Meet MILL+ with Carl Addy
Meet MILL+ with Carl AddyMeet MILL+ with Carl Addy
Meet MILL+ with Carl AddyFITC
 
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan WagnerLet ’em Explore with Stefan Wagner
Let ’em Explore with Stefan WagnerFITC
 
Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
Developing Interactive 3D Experiences in HTML5 with Carlos UlloaDeveloping Interactive 3D Experiences in HTML5 with Carlos Ulloa
Developing Interactive 3D Experiences in HTML5 with Carlos UlloaFITC
 

En vedette (19)

CSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the BackendCSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the Backend
 
Making Mixed Reality Living Spaces
Making Mixed Reality Living SpacesMaking Mixed Reality Living Spaces
Making Mixed Reality Living Spaces
 
Building Apps with Ember
Building Apps with EmberBuilding Apps with Ember
Building Apps with Ember
 
Web unleashed 2015-tammyeverts
Web unleashed 2015-tammyevertsWeb unleashed 2015-tammyeverts
Web unleashed 2015-tammyeverts
 
Building Real Time, Open-Source Tools for Wikipedia
Building Real Time, Open-Source Tools for WikipediaBuilding Real Time, Open-Source Tools for Wikipedia
Building Real Time, Open-Source Tools for Wikipedia
 
Brain Hacks
Brain HacksBrain Hacks
Brain Hacks
 
Prolific Minded
Prolific MindedProlific Minded
Prolific Minded
 
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
 
Creating Content that Captivates
Creating Content that CaptivatesCreating Content that Captivates
Creating Content that Captivates
 
Glass w/o Glass: Developing native Glass applications without the hardware w...
 Glass w/o Glass: Developing native Glass applications without the hardware w... Glass w/o Glass: Developing native Glass applications without the hardware w...
Glass w/o Glass: Developing native Glass applications without the hardware w...
 
Responsive Design, Past, Present and Future
Responsive Design, Past, Present and FutureResponsive Design, Past, Present and Future
Responsive Design, Past, Present and Future
 
Getting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernGetting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James Halpern
 
Things To Keep In Mind When Working In The World Of Responsive Design
Things To Keep In Mind When Working In The World Of Responsive DesignThings To Keep In Mind When Working In The World Of Responsive Design
Things To Keep In Mind When Working In The World Of Responsive Design
 
How long does it take to write a name?
How long does it take to write a name?How long does it take to write a name?
How long does it take to write a name?
 
Networking, Selling and Pitching
Networking, Selling and PitchingNetworking, Selling and Pitching
Networking, Selling and Pitching
 
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014
 
Meet MILL+ with Carl Addy
Meet MILL+ with Carl AddyMeet MILL+ with Carl Addy
Meet MILL+ with Carl Addy
 
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan WagnerLet ’em Explore with Stefan Wagner
Let ’em Explore with Stefan Wagner
 
Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
Developing Interactive 3D Experiences in HTML5 with Carlos UlloaDeveloping Interactive 3D Experiences in HTML5 with Carlos Ulloa
Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
 

Plus de FITC

Cut it up
Cut it upCut it up
Cut it upFITC
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital HealthFITC
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript PerformanceFITC
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech StackFITC
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR ProjectFITC
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerFITC
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryFITC
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday InnovationFITC
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight WebsitesFITC
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is TerrifyingFITC
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanFITC
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)FITC
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameFITC
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare SystemFITC
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignFITC
 
The Power of Now
The Power of NowThe Power of Now
The Power of NowFITC
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAsFITC
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstackFITC
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFITC
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForFITC
 

Plus de FITC (20)

Cut it up
Cut it upCut it up
Cut it up
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital Health
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript Performance
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech Stack
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR Project
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the Answer
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s Story
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday Innovation
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight Websites
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is Terrifying
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future Human
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR Game
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare System
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product Design
 
The Power of Now
The Power of NowThe Power of Now
The Power of Now
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAs
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstack
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self Discovery
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time For
 

Dernier

Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 

Dernier (12)

Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 

All Text Tricks in the Book, with JavaScript and Canvas