SlideShare uma empresa Scribd logo
1 de 14
Baixar para ler offline
Topic
ʕ What is HTML5 Canvas
ʕ Browser Support
ʕ To draw something
ʕ Canvas Examples
ʕ Events
ʕ Fillstyle
ʕ Gaming
Outlines
What is HTML5 Canvas
The HTML5 Canvas element is used to draw graphics via JavaScript.
The Canvas element is only a container for graphics. You must use JavaScript to
actually draw the graphics.
 Canvas used for drawing boxes, circles, text, and adding images etc.
Browser Support
The latest versions of Firefox, Safari, Chrome and Opera all support for HTML5
Canvas
but IE8 does not support canvas.
To draw something
you need 4 basic components
A Bitmap to hold the pixels.
 A Canvas to writing into the bitmap
A drawing like rectangle, arc, line etc
A paint to describe the colors and styles for the drawing
<!DOCTYPE html>
<html>
<head>
<title>A Simple Canvas
Example</title>
<style>
body {
background:#CCC;
}
#canvas {
margin: 10px;
padding: 10px;
background:#FFF;
</style>
</head>
<body>
<canvas id='canvas' width='900'
height='100'>
</canvas>
<script src="Untitled-1.js"></script>
</body>
</html>
A basic Example
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.font = '38pt times of new roman';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';
context.fillText('Hey I am Javed Akhtar', canvas.width/4 -
150, canvas.height/2 + 14);
context.strokeText('Hey I am Javed Akhtar',
canvas.width/4 - 150, canvas.height/2 + 16 );
Java script code
HTML Code
Events
 Mouse
mousedown, mouseup, mousemove, mouseout and mouseover
 Keyboard
keydown
keypress
keyup
Canvas default setting
 By default, the browser creates canvas elements with a width of 300
pixels and a height of 150 pixels. You can change the size of a
canvas element by specifying the width and height attributes
Canvas Examples
 Canvas Animation
 Canvas Rotation
 drawImage(image, dx, dy)
 Text and Fonts
 Create Gradients
A fillStyle Example
<!DOCTYPE HTML><html> <head>
<style> #test { width: 100px; height:100px; margin: 0px auto; } </style>
<script type="text/javascript"> function drawShape(){ var canvas = document.getElementById('mycanvas');
if (canvas.getContext)
{var ctx = canvas.getContext('2d'); for (var i=0;i<7;i++){ for (var j=0;j<7;j++){ ctx.fillStyle='rgb(' + Math.floor(255-
20.5*i)+ ','+ Math.floor(255 - 42.5*j) + ',255)';
ctx.fillRect( j*25, i* 25, 55, 55 ); } } else { alert('You need Safari or Firefox 1.5+ to see this demo.');} } </script>
</head>
<body id="test" onload="drawShape();"> <canvas id="mycanvas"></canvas> </body></html>
Gaming
Bounce ball game
 Create the Canvas and draw on it
 Move the ball
 Bounce off the walls
 Paddle and keyboard controls
 Game over
 Build the brick field
 Collision detection
 Track the score and win
 Mouse controls
 Finishing up
Create the Canvas and draw on it
<!DOCTYPE html>
<html>
<head><title>Gamedev Canvas Workshop</title> <style>* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; } </style></head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script> // JavaScript code goes here
</script>
</body>
</html>
Html canvas

Mais conteúdo relacionado

Mais procurados

Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tagAdvanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tagDavid Voyles
 
Simplify your CSS with Stylus and Nib
Simplify your CSS with Stylus and NibSimplify your CSS with Stylus and Nib
Simplify your CSS with Stylus and NibChristian Joudrey
 
Android Vector Drawable
 Android Vector Drawable Android Vector Drawable
Android Vector DrawablePhearum THANN
 
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricksdeanhudson
 
Responsive layouts by Maqbool
Responsive layouts by MaqboolResponsive layouts by Maqbool
Responsive layouts by MaqboolNavin Agarwal
 

Mais procurados (7)

Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tagAdvanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
 
Simplify your CSS with Stylus and Nib
Simplify your CSS with Stylus and NibSimplify your CSS with Stylus and Nib
Simplify your CSS with Stylus and Nib
 
Android Vector Drawable
 Android Vector Drawable Android Vector Drawable
Android Vector Drawable
 
Canvas & Charts
Canvas & ChartsCanvas & Charts
Canvas & Charts
 
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricks
 
Responsive layouts by Maqbool
Responsive layouts by MaqboolResponsive layouts by Maqbool
Responsive layouts by Maqbool
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 

Semelhante a Html canvas

Drawing with the HTML5 Canvas
Drawing with the HTML5 CanvasDrawing with the HTML5 Canvas
Drawing with the HTML5 CanvasHenry Osborne
 
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Codemotion
 
Canvas
CanvasCanvas
CanvasRajon
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not FlashThomas Fuchs
 
CANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEventCANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEvent민태 김
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5Jamshid Hashimi
 
HTML5 for ASP.NET Developers
HTML5 for ASP.NET DevelopersHTML5 for ASP.NET Developers
HTML5 for ASP.NET DevelopersJustin Lee
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Gill Cleeren
 
A complete html and css guidelines for beginners
A complete html and css guidelines for beginnersA complete html and css guidelines for beginners
A complete html and css guidelines for beginnersSurendra kumar
 
HTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptxHTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptxAhmadAbba6
 
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebEduardo Shiota Yasuda
 
New CSS Meets the Real World
New CSS Meets the Real WorldNew CSS Meets the Real World
New CSS Meets the Real WorldRachel Andrew
 

Semelhante a Html canvas (20)

Drawing with the HTML5 Canvas
Drawing with the HTML5 CanvasDrawing with the HTML5 Canvas
Drawing with the HTML5 Canvas
 
Plunge into HTML5 Canvas – Let’s begin
Plunge into HTML5 Canvas – Let’s beginPlunge into HTML5 Canvas – Let’s begin
Plunge into HTML5 Canvas – Let’s begin
 
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
 
Canvas
CanvasCanvas
Canvas
 
JavaScript Canvas
JavaScript CanvasJavaScript Canvas
JavaScript Canvas
 
Canvas in html5
Canvas in html5Canvas in html5
Canvas in html5
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
 
CANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEventCANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEvent
 
Html5 canvas
Html5 canvasHtml5 canvas
Html5 canvas
 
Intro to HTML5 Canvas
Intro to HTML5 CanvasIntro to HTML5 Canvas
Intro to HTML5 Canvas
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
 
HTML5 for ASP.NET Developers
HTML5 for ASP.NET DevelopersHTML5 for ASP.NET Developers
HTML5 for ASP.NET Developers
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!
 
Html5
Html5Html5
Html5
 
A complete html and css guidelines for beginners
A complete html and css guidelines for beginnersA complete html and css guidelines for beginners
A complete html and css guidelines for beginners
 
Html5
Html5Html5
Html5
 
HTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptxHTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptx
 
5. SVG.pptx
5. SVG.pptx5. SVG.pptx
5. SVG.pptx
 
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
 
New CSS Meets the Real World
New CSS Meets the Real WorldNew CSS Meets the Real World
New CSS Meets the Real World
 

Último

The basics of sentences session 8pptx.pptx
The basics of sentences session 8pptx.pptxThe basics of sentences session 8pptx.pptx
The basics of sentences session 8pptx.pptxheathfieldcps1
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...Nguyen Thanh Tu Collection
 
EDD8524 The Future of Educational Leader
EDD8524 The Future of Educational LeaderEDD8524 The Future of Educational Leader
EDD8524 The Future of Educational LeaderDr. Bruce A. Johnson
 
3.12.24 The Social Construction of Gender.pptx
3.12.24 The Social Construction of Gender.pptx3.12.24 The Social Construction of Gender.pptx
3.12.24 The Social Construction of Gender.pptxmary850239
 
BBA 205 BE UNIT 2 economic systems prof dr kanchan.pptx
BBA 205 BE UNIT 2 economic systems prof dr kanchan.pptxBBA 205 BE UNIT 2 economic systems prof dr kanchan.pptx
BBA 205 BE UNIT 2 economic systems prof dr kanchan.pptxProf. Kanchan Kumari
 
POST ENCEPHALITIS case study Jitendra bhargav
POST ENCEPHALITIS case study  Jitendra bhargavPOST ENCEPHALITIS case study  Jitendra bhargav
POST ENCEPHALITIS case study Jitendra bhargavJitendra Bhargav
 
Metabolism of lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptx
Metabolism of  lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptxMetabolism of  lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptx
Metabolism of lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptxDr. Santhosh Kumar. N
 
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptxAUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptxiammrhaywood
 
ICS2208 Lecture4 Intelligent Interface Agents.pdf
ICS2208 Lecture4 Intelligent Interface Agents.pdfICS2208 Lecture4 Intelligent Interface Agents.pdf
ICS2208 Lecture4 Intelligent Interface Agents.pdfVanessa Camilleri
 
Arti Languages Pre Seed Send Ahead Pitchdeck 2024.pdf
Arti Languages Pre Seed Send Ahead Pitchdeck 2024.pdfArti Languages Pre Seed Send Ahead Pitchdeck 2024.pdf
Arti Languages Pre Seed Send Ahead Pitchdeck 2024.pdfwill854175
 
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptxBBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptxProf. Kanchan Kumari
 
Research Methodology and Tips on Better Research
Research Methodology and Tips on Better ResearchResearch Methodology and Tips on Better Research
Research Methodology and Tips on Better ResearchRushdi Shams
 
THYROID HORMONE.pptx by Subham Panja,Asst. Professor, Department of B.Sc MLT,...
THYROID HORMONE.pptx by Subham Panja,Asst. Professor, Department of B.Sc MLT,...THYROID HORMONE.pptx by Subham Panja,Asst. Professor, Department of B.Sc MLT,...
THYROID HORMONE.pptx by Subham Panja,Asst. Professor, Department of B.Sc MLT,...Subham Panja
 
Auchitya Theory by Kshemendra Indian Poetics
Auchitya Theory by Kshemendra Indian PoeticsAuchitya Theory by Kshemendra Indian Poetics
Auchitya Theory by Kshemendra Indian PoeticsDhatriParmar
 
Pharmacology chapter No 7 full notes.pdf
Pharmacology chapter No 7 full notes.pdfPharmacology chapter No 7 full notes.pdf
Pharmacology chapter No 7 full notes.pdfSumit Tiwari
 
UNIT I Design Thinking and Explore.pptx
UNIT I  Design Thinking and Explore.pptxUNIT I  Design Thinking and Explore.pptx
UNIT I Design Thinking and Explore.pptxGOWSIKRAJA PALANISAMY
 
Certification Study Group - Professional ML Engineer Session 3 (Machine Learn...
Certification Study Group - Professional ML Engineer Session 3 (Machine Learn...Certification Study Group - Professional ML Engineer Session 3 (Machine Learn...
Certification Study Group - Professional ML Engineer Session 3 (Machine Learn...gdgsurrey
 

Último (20)

The basics of sentences session 8pptx.pptx
The basics of sentences session 8pptx.pptxThe basics of sentences session 8pptx.pptx
The basics of sentences session 8pptx.pptx
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
 
EDD8524 The Future of Educational Leader
EDD8524 The Future of Educational LeaderEDD8524 The Future of Educational Leader
EDD8524 The Future of Educational Leader
 
Least Significance Difference:Biostatics and Research Methodology
Least Significance Difference:Biostatics and Research MethodologyLeast Significance Difference:Biostatics and Research Methodology
Least Significance Difference:Biostatics and Research Methodology
 
3.12.24 The Social Construction of Gender.pptx
3.12.24 The Social Construction of Gender.pptx3.12.24 The Social Construction of Gender.pptx
3.12.24 The Social Construction of Gender.pptx
 
BBA 205 BE UNIT 2 economic systems prof dr kanchan.pptx
BBA 205 BE UNIT 2 economic systems prof dr kanchan.pptxBBA 205 BE UNIT 2 economic systems prof dr kanchan.pptx
BBA 205 BE UNIT 2 economic systems prof dr kanchan.pptx
 
POST ENCEPHALITIS case study Jitendra bhargav
POST ENCEPHALITIS case study  Jitendra bhargavPOST ENCEPHALITIS case study  Jitendra bhargav
POST ENCEPHALITIS case study Jitendra bhargav
 
Metabolism of lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptx
Metabolism of  lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptxMetabolism of  lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptx
Metabolism of lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptx
 
Problems on Mean,Mode,Median Standard Deviation
Problems on Mean,Mode,Median Standard DeviationProblems on Mean,Mode,Median Standard Deviation
Problems on Mean,Mode,Median Standard Deviation
 
t-test Parametric test Biostatics and Research Methodology
t-test Parametric test Biostatics and Research Methodologyt-test Parametric test Biostatics and Research Methodology
t-test Parametric test Biostatics and Research Methodology
 
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptxAUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
 
ICS2208 Lecture4 Intelligent Interface Agents.pdf
ICS2208 Lecture4 Intelligent Interface Agents.pdfICS2208 Lecture4 Intelligent Interface Agents.pdf
ICS2208 Lecture4 Intelligent Interface Agents.pdf
 
Arti Languages Pre Seed Send Ahead Pitchdeck 2024.pdf
Arti Languages Pre Seed Send Ahead Pitchdeck 2024.pdfArti Languages Pre Seed Send Ahead Pitchdeck 2024.pdf
Arti Languages Pre Seed Send Ahead Pitchdeck 2024.pdf
 
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptxBBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
 
Research Methodology and Tips on Better Research
Research Methodology and Tips on Better ResearchResearch Methodology and Tips on Better Research
Research Methodology and Tips on Better Research
 
THYROID HORMONE.pptx by Subham Panja,Asst. Professor, Department of B.Sc MLT,...
THYROID HORMONE.pptx by Subham Panja,Asst. Professor, Department of B.Sc MLT,...THYROID HORMONE.pptx by Subham Panja,Asst. Professor, Department of B.Sc MLT,...
THYROID HORMONE.pptx by Subham Panja,Asst. Professor, Department of B.Sc MLT,...
 
Auchitya Theory by Kshemendra Indian Poetics
Auchitya Theory by Kshemendra Indian PoeticsAuchitya Theory by Kshemendra Indian Poetics
Auchitya Theory by Kshemendra Indian Poetics
 
Pharmacology chapter No 7 full notes.pdf
Pharmacology chapter No 7 full notes.pdfPharmacology chapter No 7 full notes.pdf
Pharmacology chapter No 7 full notes.pdf
 
UNIT I Design Thinking and Explore.pptx
UNIT I  Design Thinking and Explore.pptxUNIT I  Design Thinking and Explore.pptx
UNIT I Design Thinking and Explore.pptx
 
Certification Study Group - Professional ML Engineer Session 3 (Machine Learn...
Certification Study Group - Professional ML Engineer Session 3 (Machine Learn...Certification Study Group - Professional ML Engineer Session 3 (Machine Learn...
Certification Study Group - Professional ML Engineer Session 3 (Machine Learn...
 

Html canvas

  • 2. ʕ What is HTML5 Canvas ʕ Browser Support ʕ To draw something ʕ Canvas Examples ʕ Events ʕ Fillstyle ʕ Gaming Outlines
  • 3. What is HTML5 Canvas The HTML5 Canvas element is used to draw graphics via JavaScript. The Canvas element is only a container for graphics. You must use JavaScript to actually draw the graphics.  Canvas used for drawing boxes, circles, text, and adding images etc.
  • 4. Browser Support The latest versions of Firefox, Safari, Chrome and Opera all support for HTML5 Canvas but IE8 does not support canvas.
  • 5. To draw something you need 4 basic components A Bitmap to hold the pixels.  A Canvas to writing into the bitmap A drawing like rectangle, arc, line etc A paint to describe the colors and styles for the drawing
  • 6. <!DOCTYPE html> <html> <head> <title>A Simple Canvas Example</title> <style> body { background:#CCC; } #canvas { margin: 10px; padding: 10px; background:#FFF; </style> </head> <body> <canvas id='canvas' width='900' height='100'> </canvas> <script src="Untitled-1.js"></script> </body> </html> A basic Example var canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); context.font = '38pt times of new roman'; context.fillStyle = 'cornflowerblue'; context.strokeStyle = 'blue'; context.fillText('Hey I am Javed Akhtar', canvas.width/4 - 150, canvas.height/2 + 14); context.strokeText('Hey I am Javed Akhtar', canvas.width/4 - 150, canvas.height/2 + 16 ); Java script code HTML Code
  • 7. Events  Mouse mousedown, mouseup, mousemove, mouseout and mouseover  Keyboard keydown keypress keyup
  • 8. Canvas default setting  By default, the browser creates canvas elements with a width of 300 pixels and a height of 150 pixels. You can change the size of a canvas element by specifying the width and height attributes
  • 9. Canvas Examples  Canvas Animation  Canvas Rotation  drawImage(image, dx, dy)  Text and Fonts  Create Gradients
  • 10. A fillStyle Example <!DOCTYPE HTML><html> <head> <style> #test { width: 100px; height:100px; margin: 0px auto; } </style> <script type="text/javascript"> function drawShape(){ var canvas = document.getElementById('mycanvas'); if (canvas.getContext) {var ctx = canvas.getContext('2d'); for (var i=0;i<7;i++){ for (var j=0;j<7;j++){ ctx.fillStyle='rgb(' + Math.floor(255- 20.5*i)+ ','+ Math.floor(255 - 42.5*j) + ',255)'; ctx.fillRect( j*25, i* 25, 55, 55 ); } } else { alert('You need Safari or Firefox 1.5+ to see this demo.');} } </script> </head> <body id="test" onload="drawShape();"> <canvas id="mycanvas"></canvas> </body></html>
  • 12. Bounce ball game  Create the Canvas and draw on it  Move the ball  Bounce off the walls  Paddle and keyboard controls  Game over  Build the brick field  Collision detection  Track the score and win  Mouse controls  Finishing up
  • 13. Create the Canvas and draw on it <!DOCTYPE html> <html> <head><title>Gamedev Canvas Workshop</title> <style>* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style></head> <body> <canvas id="myCanvas" width="480" height="320"></canvas> <script> // JavaScript code goes here </script> </body> </html>