SlideShare a Scribd company logo
1 of 42
Canvas5 Drawing and Animation 
HTML 
Presenter: Ashim Das, Mindfire Solutions 
Skype: mfsi_ashim 
Date: 13/11/2013
Reference
The Canvas Element
Use document.getElementById() to get a 
reference to canvas 
Call getContext('2d') on the canvas to get the 
graphics context 
Use the context to draw in the canvas
The Canvas API 
Canvas attributes 
width 
height 
Canvas methods 
getContext() 
toDataURL(type, quality) 
toBlob(callback, type, args...)
The Canvas Context 
Although the context provides 2d graphics context, the 
Canvas specification embraces other types of contexts as 
well; for example, a 3d context specification is already 
well underway. 
CanvasRenderingContext2D attributes 
canvas miterLimit 
fillStyle shadowBlur 
font shadowColor 
globalAlpha shadowOffsetX 
globalComposite-Operation shadowOffsetY 
lineCap strokeStyle 
lineWidth textAlign 
lineJoin textBaseline
Event Handling 
Mouse Events 
canvas.onmousedown = function(e) { 
//mouse down event reaction 
}; 
or 
canvas.addEventListener('mousedown', function(e) { 
//mouse down event reaction 
});
Event Handling 
Keyboard Events 
Key Events 
keydown 
keypress 
keyup 
var key = String.fromCharCode(event.which); 
Touch Events 
touchstart 
touchmove 
touchend 
touchcancel 
canvas.ontouchstart = function(e) {….....
Invisible HTML Elements 
Rubber band with a floating div 
Printing a canvas 
Using toDataURL() to print a canvas
Drawing
The Coordinate System
Transformation 
Translate 
Rotate 
Scale 
Create custom transformations, such as shear
The Drawing Model 
Draws the shape or image into an infinite, transparent bitmap, 
honoring the current fill, stroke, and line styles. 
Draws the shadow from the shape or image into a second bitmap, 
using the current context shadow settings. 
Multiplies every shadow pixel's alpha component by the 
globalAlpha property of the context. 
Composites the shadow bitmap into the canvas clipped to the 
clipping region, using the current composition. 
Multiplies every pixel for the shape or image by the globalAlpha 
property of the context. 
Composites the shape or image bitmap into the clipping region 
over the current canvas bitmap, using the current composition 
operator.
Drawing Rectangles 
clearRect(double x, double y, double w, double h) 
strokeRect(double x, double y, double w, double h) 
fillRect(double x, double y, double w, double h) 
Colors and Transparency
Gradients 
Linear Gradients 
createLinearGradient( 
double x0, double y0, 
double x1, double y1) 
Radial Gradients 
createRadialGradient( 
double x0, double y0, 
double r0, double x1, 
double y1, double r1)
Patterns 
createPattern(HTMLImageElement | HTMLCanvasElement | 
HTMLVideoElement image, DOMString repetition)
Shadows 
shadowColor: a CSS3 color 
shadowOffsetX: the horizontal offset in pixels from shape 
or text to the shadow 
shadowOffsetY: the vertical offset in pixels from shape or 
text to the shadow 
shadowBlur: a value, used in a Gaussian blur equation to 
smear the shadow 
Inset Shadows 
Negative values in OffSet
Paths, Stroking, and Filling
Cutouts
Lines 
moveTo(x, y) 
lineTo(x, y) 
Drawing a Grid
Rubberband Lines 
Dashed Lines
Line Caps and Joins
Arcs and Circles 
arc(x, y, radius, startAngle, endAngle, counterClockwise) 
Rubberband Circles 
Rounded Rectangles (the arcTo() 
method)
Dials and Gauges
Bezier Curves 
quadraticCurveTo(double 
cpx, double cpy, double x, 
double y) 
Rounded corners with bezier 
curves
Cubic Curves 
bezierCurveTo(double cpx, double cpy, double cp2x, double 
cp2y, double x, double y)
Transformations 
rotate(double angleInRadians) 
scale(double x, double y) 
translate(double x, double y) 
Custom Transformations 
transform(double a, double b, double c, double d, double e, 
double f) 
setTransform(double a, double b, double c, double d, double e, 
double f)
Text
Methods 
rotate(double angleInRadians) 
scale(double x, double y) 
translate(double x, double y) 
Properties 
font 
textAlign 
textBaseline
Stroking and Filling Text
Text Patterns and Gradients
Setting Font Properties 
font-style 
font-variant 
font-weight 
font-size 
line-height 
font-family
Positioning Text 
textAlign 
textBaseline
Text around arcs
Text cursors
Animation
The requestAnimationFrame() 
method 
function animate(time) { 
// Update and draw animation objects 
requestAnimationFrame(animate); // Sustain the animation 
} ... 
requestAnimationFrame(animate); // Start the animation 
long window.requestAnimationFrame(FrameRequestCallback 
callback) 
void window.cancelRequestAnimationFrame(long handle)
Portable Animation loop 
The requestAnimationFrame() polyfill
Scrolling Backgrounds
Parallax
Timed Animation
Thank 
You

More Related Content

What's hot

Tools & Resources for Data Visualisation
Tools & Resources for Data VisualisationTools & Resources for Data Visualisation
Tools & Resources for Data VisualisationAmit Kapoor
 
Visualising Big Data
Visualising Big DataVisualising Big Data
Visualising Big DataAmit Kapoor
 
Animation Institute in Pune
Animation Institute in PuneAnimation Institute in Pune
Animation Institute in PuneClassboat.com
 
rlottie - a new approach to motion graphics ui
rlottie -  a new approach to motion graphics uirlottie -  a new approach to motion graphics ui
rlottie - a new approach to motion graphics uiHermet Park
 
National Examinations 2010, QAAET, Bahrain, maths, grade 9, paper 1 Q
National Examinations 2010, QAAET, Bahrain, maths, grade 9, paper 1 QNational Examinations 2010, QAAET, Bahrain, maths, grade 9, paper 1 Q
National Examinations 2010, QAAET, Bahrain, maths, grade 9, paper 1 QQAAET_BH
 
National Examinations 2010, Bahrain, QAAET, maths, grade 9, paper 2 Q
National Examinations 2010, Bahrain, QAAET, maths, grade 9, paper 2 QNational Examinations 2010, Bahrain, QAAET, maths, grade 9, paper 2 Q
National Examinations 2010, Bahrain, QAAET, maths, grade 9, paper 2 QQAAET_BH
 

What's hot (8)

L1 slides
L1 slidesL1 slides
L1 slides
 
Tools & Resources for Data Visualisation
Tools & Resources for Data VisualisationTools & Resources for Data Visualisation
Tools & Resources for Data Visualisation
 
Visualising Big Data
Visualising Big DataVisualising Big Data
Visualising Big Data
 
Animation Institute in Pune
Animation Institute in PuneAnimation Institute in Pune
Animation Institute in Pune
 
rlottie - a new approach to motion graphics ui
rlottie -  a new approach to motion graphics uirlottie -  a new approach to motion graphics ui
rlottie - a new approach to motion graphics ui
 
Ar1 twf030 lecture2.2
Ar1 twf030 lecture2.2Ar1 twf030 lecture2.2
Ar1 twf030 lecture2.2
 
National Examinations 2010, QAAET, Bahrain, maths, grade 9, paper 1 Q
National Examinations 2010, QAAET, Bahrain, maths, grade 9, paper 1 QNational Examinations 2010, QAAET, Bahrain, maths, grade 9, paper 1 Q
National Examinations 2010, QAAET, Bahrain, maths, grade 9, paper 1 Q
 
National Examinations 2010, Bahrain, QAAET, maths, grade 9, paper 2 Q
National Examinations 2010, Bahrain, QAAET, maths, grade 9, paper 2 QNational Examinations 2010, Bahrain, QAAET, maths, grade 9, paper 2 Q
National Examinations 2010, Bahrain, QAAET, maths, grade 9, paper 2 Q
 

Viewers also liked

ベジェ曲線を書いてみた
ベジェ曲線を書いてみたベジェ曲線を書いてみた
ベジェ曲線を書いてみたHiromu Shioya
 
Basic Concepts of Animation
Basic Concepts of AnimationBasic Concepts of Animation
Basic Concepts of Animationjamalharun
 
12 Concepts of Animation
12 Concepts of Animation12 Concepts of Animation
12 Concepts of Animationjaspang
 
Animation techniques for CG students
Animation techniques for CG studentsAnimation techniques for CG students
Animation techniques for CG studentsMahith
 
Animation Techniques
Animation TechniquesAnimation Techniques
Animation TechniquesMedia Studies
 
(Computer) Animation Technique
(Computer) Animation Technique(Computer) Animation Technique
(Computer) Animation Techniquejustinesolano
 
Introduction to Animation
Introduction to AnimationIntroduction to Animation
Introduction to Animationmrnasim
 
Computer Animation PowerPoint
Computer Animation PowerPointComputer Animation PowerPoint
Computer Animation PowerPointoacore2
 

Viewers also liked (12)

ベジェ曲線を書いてみた
ベジェ曲線を書いてみたベジェ曲線を書いてみた
ベジェ曲線を書いてみた
 
Dhtml sohaib ch
Dhtml sohaib chDhtml sohaib ch
Dhtml sohaib ch
 
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
 
Basic Concepts of Animation
Basic Concepts of AnimationBasic Concepts of Animation
Basic Concepts of Animation
 
12 Concepts of Animation
12 Concepts of Animation12 Concepts of Animation
12 Concepts of Animation
 
Animation techniques for CG students
Animation techniques for CG studentsAnimation techniques for CG students
Animation techniques for CG students
 
Animation Techniques
Animation TechniquesAnimation Techniques
Animation Techniques
 
(Computer) Animation Technique
(Computer) Animation Technique(Computer) Animation Technique
(Computer) Animation Technique
 
Introduction to Animation
Introduction to AnimationIntroduction to Animation
Introduction to Animation
 
Animation
AnimationAnimation
Animation
 
ANIMATION PPT
ANIMATION PPTANIMATION PPT
ANIMATION PPT
 
Computer Animation PowerPoint
Computer Animation PowerPointComputer Animation PowerPoint
Computer Animation PowerPoint
 

Similar to Html5 Canvas Drawing and Animation

HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebRobin Hawkes
 
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationAnthony Starks
 
Lecture on graphics
Lecture on graphicsLecture on graphics
Lecture on graphicsRafi_Dar
 
Unit-1 basics of computer graphics
Unit-1 basics of computer graphicsUnit-1 basics of computer graphics
Unit-1 basics of computer graphicsAmol Gaikwad
 
HTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptxHTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptxAhmadAbba6
 
Trident International Graphics Workshop 2014 4/5
Trident International Graphics Workshop 2014 4/5Trident International Graphics Workshop 2014 4/5
Trident International Graphics Workshop 2014 4/5Takao Wada
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Groupdreambreeze
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Groupbernice-chan
 
[Paper] GIRAFFE: Representing Scenes as Compositional Generative Neural Featu...
[Paper] GIRAFFE: Representing Scenes as Compositional Generative Neural Featu...[Paper] GIRAFFE: Representing Scenes as Compositional Generative Neural Featu...
[Paper] GIRAFFE: Representing Scenes as Compositional Generative Neural Featu...Susang Kim
 
Computer Graphics in Java and Scala - Part 1b
Computer Graphics in Java and Scala - Part 1bComputer Graphics in Java and Scala - Part 1b
Computer Graphics in Java and Scala - Part 1bPhilip Schwarz
 
An Introduction to NV_path_rendering
An Introduction to NV_path_renderingAn Introduction to NV_path_rendering
An Introduction to NV_path_renderingMark Kilgard
 

Similar to Html5 Canvas Drawing and Animation (20)

Intro to HTML5 Canvas
Intro to HTML5 CanvasIntro to HTML5 Canvas
Intro to HTML5 Canvas
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
 
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
 
HTML 5 Canvas & SVG
HTML 5 Canvas & SVGHTML 5 Canvas & SVG
HTML 5 Canvas & SVG
 
canvas.pptx
canvas.pptxcanvas.pptx
canvas.pptx
 
Lecture on graphics
Lecture on graphicsLecture on graphics
Lecture on graphics
 
HTML 5_Canvas
HTML 5_CanvasHTML 5_Canvas
HTML 5_Canvas
 
canvas_1.pptx
canvas_1.pptxcanvas_1.pptx
canvas_1.pptx
 
Unit-1 basics of computer graphics
Unit-1 basics of computer graphicsUnit-1 basics of computer graphics
Unit-1 basics of computer graphics
 
HTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptxHTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptx
 
SVGo workshop
SVGo workshopSVGo workshop
SVGo workshop
 
Css5 canvas
Css5 canvasCss5 canvas
Css5 canvas
 
Trident International Graphics Workshop 2014 4/5
Trident International Graphics Workshop 2014 4/5Trident International Graphics Workshop 2014 4/5
Trident International Graphics Workshop 2014 4/5
 
Intro to Canva
Intro to CanvaIntro to Canva
Intro to Canva
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
 
[Paper] GIRAFFE: Representing Scenes as Compositional Generative Neural Featu...
[Paper] GIRAFFE: Representing Scenes as Compositional Generative Neural Featu...[Paper] GIRAFFE: Representing Scenes as Compositional Generative Neural Featu...
[Paper] GIRAFFE: Representing Scenes as Compositional Generative Neural Featu...
 
Computer Graphics in Java and Scala - Part 1b
Computer Graphics in Java and Scala - Part 1bComputer Graphics in Java and Scala - Part 1b
Computer Graphics in Java and Scala - Part 1b
 
HTML5 Canvas
HTML5 CanvasHTML5 Canvas
HTML5 Canvas
 
An Introduction to NV_path_rendering
An Introduction to NV_path_renderingAn Introduction to NV_path_rendering
An Introduction to NV_path_rendering
 

More from Mindfire Solutions (20)

Physician Search and Review
Physician Search and ReviewPhysician Search and Review
Physician Search and Review
 
diet management app
diet management appdiet management app
diet management app
 
Business Technology Solution
Business Technology SolutionBusiness Technology Solution
Business Technology Solution
 
Remote Health Monitoring
Remote Health MonitoringRemote Health Monitoring
Remote Health Monitoring
 
Influencer Marketing Solution
Influencer Marketing SolutionInfluencer Marketing Solution
Influencer Marketing Solution
 
ELMAH
ELMAHELMAH
ELMAH
 
High Availability of Azure Applications
High Availability of Azure ApplicationsHigh Availability of Azure Applications
High Availability of Azure Applications
 
IOT Hands On
IOT Hands OnIOT Hands On
IOT Hands On
 
Glimpse of Loops Vs Set
Glimpse of Loops Vs SetGlimpse of Loops Vs Set
Glimpse of Loops Vs Set
 
Oracle Sql Developer-Getting Started
Oracle Sql Developer-Getting StartedOracle Sql Developer-Getting Started
Oracle Sql Developer-Getting Started
 
Adaptive Layout In iOS 8
Adaptive Layout In iOS 8Adaptive Layout In iOS 8
Adaptive Layout In iOS 8
 
Introduction to Auto-layout : iOS/Mac
Introduction to Auto-layout : iOS/MacIntroduction to Auto-layout : iOS/Mac
Introduction to Auto-layout : iOS/Mac
 
LINQPad - utility Tool
LINQPad - utility ToolLINQPad - utility Tool
LINQPad - utility Tool
 
Get started with watch kit development
Get started with watch kit developmentGet started with watch kit development
Get started with watch kit development
 
Swift vs Objective-C
Swift vs Objective-CSwift vs Objective-C
Swift vs Objective-C
 
Material Design in Android
Material Design in AndroidMaterial Design in Android
Material Design in Android
 
Introduction to OData
Introduction to ODataIntroduction to OData
Introduction to OData
 
Ext js Part 2- MVC
Ext js Part 2- MVCExt js Part 2- MVC
Ext js Part 2- MVC
 
ExtJs Basic Part-1
ExtJs Basic Part-1ExtJs Basic Part-1
ExtJs Basic Part-1
 
Spring Security Introduction
Spring Security IntroductionSpring Security Introduction
Spring Security Introduction
 

Recently uploaded

Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsUnveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsAlberto González Trastoy
 
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsAndolasoft Inc
 
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️anilsa9823
 
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comFatema Valibhai
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...MyIntelliSource, Inc.
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...kellynguyen01
 
Optimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTVOptimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTVshikhaohhpro
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...ICS
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsJhone kinadey
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️Delhi Call girls
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxbodapatigopi8531
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsArshad QA
 
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionSolGuruz
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdfWave PLM
 
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerHow To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerThousandEyes
 
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female serviceCALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female serviceanilsa9823
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfkalichargn70th171
 

Recently uploaded (20)

Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsUnveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
 
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
 
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
 
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.com
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
 
Optimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTVOptimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTV
 
Microsoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdfMicrosoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdf
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
 
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS LiveVip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptx
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with Precision
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
 
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerHow To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
 
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female serviceCALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
 

Html5 Canvas Drawing and Animation

  • 1. Canvas5 Drawing and Animation HTML Presenter: Ashim Das, Mindfire Solutions Skype: mfsi_ashim Date: 13/11/2013
  • 4. Use document.getElementById() to get a reference to canvas Call getContext('2d') on the canvas to get the graphics context Use the context to draw in the canvas
  • 5. The Canvas API Canvas attributes width height Canvas methods getContext() toDataURL(type, quality) toBlob(callback, type, args...)
  • 6. The Canvas Context Although the context provides 2d graphics context, the Canvas specification embraces other types of contexts as well; for example, a 3d context specification is already well underway. CanvasRenderingContext2D attributes canvas miterLimit fillStyle shadowBlur font shadowColor globalAlpha shadowOffsetX globalComposite-Operation shadowOffsetY lineCap strokeStyle lineWidth textAlign lineJoin textBaseline
  • 7. Event Handling Mouse Events canvas.onmousedown = function(e) { //mouse down event reaction }; or canvas.addEventListener('mousedown', function(e) { //mouse down event reaction });
  • 8. Event Handling Keyboard Events Key Events keydown keypress keyup var key = String.fromCharCode(event.which); Touch Events touchstart touchmove touchend touchcancel canvas.ontouchstart = function(e) {….....
  • 9. Invisible HTML Elements Rubber band with a floating div Printing a canvas Using toDataURL() to print a canvas
  • 12. Transformation Translate Rotate Scale Create custom transformations, such as shear
  • 13. The Drawing Model Draws the shape or image into an infinite, transparent bitmap, honoring the current fill, stroke, and line styles. Draws the shadow from the shape or image into a second bitmap, using the current context shadow settings. Multiplies every shadow pixel's alpha component by the globalAlpha property of the context. Composites the shadow bitmap into the canvas clipped to the clipping region, using the current composition. Multiplies every pixel for the shape or image by the globalAlpha property of the context. Composites the shape or image bitmap into the clipping region over the current canvas bitmap, using the current composition operator.
  • 14. Drawing Rectangles clearRect(double x, double y, double w, double h) strokeRect(double x, double y, double w, double h) fillRect(double x, double y, double w, double h) Colors and Transparency
  • 15. Gradients Linear Gradients createLinearGradient( double x0, double y0, double x1, double y1) Radial Gradients createRadialGradient( double x0, double y0, double r0, double x1, double y1, double r1)
  • 16. Patterns createPattern(HTMLImageElement | HTMLCanvasElement | HTMLVideoElement image, DOMString repetition)
  • 17. Shadows shadowColor: a CSS3 color shadowOffsetX: the horizontal offset in pixels from shape or text to the shadow shadowOffsetY: the vertical offset in pixels from shape or text to the shadow shadowBlur: a value, used in a Gaussian blur equation to smear the shadow Inset Shadows Negative values in OffSet
  • 20. Lines moveTo(x, y) lineTo(x, y) Drawing a Grid
  • 22. Line Caps and Joins
  • 23. Arcs and Circles arc(x, y, radius, startAngle, endAngle, counterClockwise) Rubberband Circles Rounded Rectangles (the arcTo() method)
  • 25. Bezier Curves quadraticCurveTo(double cpx, double cpy, double x, double y) Rounded corners with bezier curves
  • 26. Cubic Curves bezierCurveTo(double cpx, double cpy, double cp2x, double cp2y, double x, double y)
  • 27. Transformations rotate(double angleInRadians) scale(double x, double y) translate(double x, double y) Custom Transformations transform(double a, double b, double c, double d, double e, double f) setTransform(double a, double b, double c, double d, double e, double f)
  • 28. Text
  • 29. Methods rotate(double angleInRadians) scale(double x, double y) translate(double x, double y) Properties font textAlign textBaseline
  • 31. Text Patterns and Gradients
  • 32. Setting Font Properties font-style font-variant font-weight font-size line-height font-family
  • 37. The requestAnimationFrame() method function animate(time) { // Update and draw animation objects requestAnimationFrame(animate); // Sustain the animation } ... requestAnimationFrame(animate); // Start the animation long window.requestAnimationFrame(FrameRequestCallback callback) void window.cancelRequestAnimationFrame(long handle)
  • 38. Portable Animation loop The requestAnimationFrame() polyfill