Scribd
Upload
54 views

Javascript Html5 Canavas

The document introduces the HTML5 Canvas API and provides examples of how to draw shapes and create animations using JavaScript and the Canvas element. It explains that the Canvas element creates a rectangular drawing surface that can be manipulated with JavaScript to draw graphics, shapes, and text. Examples are given that show how to draw a circle and create an animated clock using Canvas. The clock example demonstrates how Canvas can be used to create animations by updating and redrawing the canvas continuously.

Uploaded by

mihailu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
54 views

Javascript Html5 Canavas

The document introduces the HTML5 Canvas API and provides examples of how to draw shapes and create animations using JavaScript and the Canvas element. It explains that the Canvas element creates a rectangular drawing surface that can be manipulated with JavaScript to draw graphics, shapes, and text. Examples are given that show how to draw a circle and create an animated clock using Canvas. The clock example demonstrates how Canvas can be used to create animations by updating and redrawing the canvas continuously.

Uploaded by

mihailu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

MENU

report this ad
Introducing Javascript HTML5 Canvas API

View more Tutorials:

ECMAScript, Javascript Tutorials

1- HTML5 Canvas
2- Some examples of Canvas:

report this ad

1- HTML5 Canvas
Before HTML5 was created, when web developers wanted to use graphics or animation on the website,  a
product of the thirt party such as Flash, Java Applet  had to be embedded.  Although this may solve the
problem, the website becomes heavier and there is something that has not satisfied you.

When HTML5 was launched, it introduced


report this adpeople to many new features and tags including the  <canvas>
element. The <canvas> element creates a rectangular area and you need to use Javascript to draw on that
area.

Canvas is available as an API and it is supported by modern browsers. Moreover, it is compatible with multiple
platforms. Therefore, you can create applications once and deploy to many different platforms - PCs or mobile
devices.

As a result, you can create a game like this with Javascript only:

report this ad
report this ad

report this ad
Browsers support the  <canvas> element:
2- Some examples of Canvas:

report this ad

In this section, I'm going to introduce you to several examples using HTML5 Canvas, the main purpose of
which is to help you visualize what you can do with HTML5 Canvas.

<canvas>

By default, the   <canvas>  element creates a rectangular area without border and content. You can set the
width and height for the <canvas> by using the width and height attributes. If the width and height attributes
are not specified, they will have a default value of 300px and 150px respectively.

first-canvas-example.html
report this ad
?
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Canvas</title>
5 <meta charset="UTF-8">
6 </head>
7 <body>
8
9 <h1>HTML5 Canvas</h1>
10
11 <canvas style="border:1px solid black" width=280 height=150>
12 Your browser does not support the HTML5 Canvas.
13 </canvas>
14
15 </body>
16 </html>
17
report this ad

An example of drawing a circle on  Canvas:

?
1 function drawCircle() {
2 var c = document.getElementById("myCanvas");
3 var ctx = c.getContext("2d");
report this ad
4 ctx.beginPath();
5 ctx.arc(95, 50, 40, 0, 2 * Math.PI);
6 ctx.stroke();
7 }
Draw Circle
Draw Circle Reset

report this ad

See full source code of the example here:

draw-circle-example.html

?
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Canvas</title>
5 <meta charset="UTF-8">
6 <script>
7 function drawCircle()  {
8 var c = document.getElementById("myCanvas");
9 var ctx = c.getContext("2d");
report this ad
10 ctx.beginPath();
11 ctx.arc(95, 50, 40, 0, 2 * Math.PI);
12 ctx.stroke();
13 }
14 </script>
15 </head>
16 <body>
17
18 <h2>Draw Circle</h2>
19
20 <button onclick="drawCircle()">Draw Circle</button>
21 <a href="">Reset</a>
22 <br/><br/>
23
24 <canvas id="myCanvas" style="border:1px solid black" width=280 height=150>
25 Your browser does not support the HTML5 Canvas.
26 </canvas>
27
28 </body>
29 </html>

HTML 5 Clock
The example below uses Javascript and Canvas to create a clock that displays the current time. This shows
that the Canvas API can create animation effects.

HTML 5 Clock

report this ad

clock.js
report this ad
1 function drawClock() {
2 var canvas = document.getElementById('myClock');
3 if (canvas.getContext) {
4 var c2d = canvas.getContext('2d');
5 c2d.clearRect(0, 0, 300, 300);
6 //Define gradients for 3D / shadow effect
7 var grad1 = c2d.createLinearGradient(0, 0, 300, 300);
8 grad1.addColorStop(0, "#D83040");
9 grad1.addColorStop(1, "#801020");
10 var grad2 = c2d.createLinearGradient(0, 0, 300, 300);
11 grad2.addColorStop(0, "#801020");
12 grad2.addColorStop(1, "#D83040");
13 c2d.font = "Bold 20px Arial";
14 c2d.textBaseline = "middle";
15 c2d.textAlign = "center";
16 c2d.lineWidth = 1;
17 c2d.save();
18 //Outer bezel
19 c2d.strokeStyle = grad1;
20 c2d.lineWidth = 10;
21 c2d.beginPath();
22 c2d.arc(150, 150, 138, 0, Math.PI * 2, true);
23 c2d.shadowOffsetX = 4;
24 c2d.shadowOffsetY = 4;
25 c2d.shadowColor = "rgba(0,0,0,0.6)";
26 c2d.shadowBlur = 6;
27 c2d.stroke();
28 //Inner bezel
29 c2d.restore();
30 c2d.strokeStyle = grad2;
31 c2d.lineWidth = 10;
32 c2d.beginPath();
33 c2d.arc(150, 150, 129, 0, Math.PI * 2, true);
34 c2d.stroke();
35 c2d.strokeStyle = "#222";
36 c2d.save();
37 c2d.translate(150, 150);
38 //Markings/Numerals
39 for (i = 1; i <= 60; i++) {
40 ang = Math.PI / 30 * i;
41 sang = Math.sin(ang);
42 cang = Math.cos(ang);
43 //If modulus of divide by 5 is zero then draw an hour marker/numeral
44 if (i % 5 == 0) {
45 c2d.lineWidth = 8; report this ad
46 sx = sang * 95;
47 sy = cang * -95;
48 ex = sang * 120;
49 ey = cang * -120;
50 nx = sang * 80;
51 ny = cang * -80;
52 c2d.fillText(i / 5, nx, ny);
53 //Else this is a minute marker
54 } else {
55 c2d.lineWidth = 2;
56 sx = sang * 110;
57 sy = cang * 110;
58 ex = sang * 120;
59 ey = cang * 120;
60 }
61 c2d.beginPath();
62 c2d.moveTo(sx, sy);
63 c2d.lineTo(ex,report
ey); this ad
64 c2d.stroke();
65 }
66 //Fetch the current time
67 var ampm = "AM";
68 var now = new Date();
69 var hrs = now.getHours();
70 var min = now.getMinutes();
71 var sec = now.getSeconds();
72 c2d.strokeStyle = "#000";
73 //Draw AM/PM indicator
74 if (hrs >= 12) ampm = "PM";
75 c2d.lineWidth = 1;
76 c2d.strokeRect(21, -14, 44, 27);
77 c2d.fillText(ampm, 43, 0);
78
79 c2d.lineWidth = 6;
80 c2d.save();
81 //Draw clock pointers but this time rotate the canvas rather than
82 //calculate x/y start/end positions.
83 //
84 //Draw hour hand
85 c2d.rotate(Math.PI / 6 * (hrs + (min / 60) + (sec / 3600)));
86 c2d.beginPath();
87 c2d.moveTo(0, 10);
88 c2d.lineTo(0, -60);
89 c2d.stroke();
90 c2d.restore();
91 c2d.save();
92 //Draw minute hand
93 c2d.rotate(Math.PI / 30 * (min + (sec / 60)));
94 c2d.beginPath();
95 c2d.moveTo(0, 20);
96 c2d.lineTo(0, -110);
97 c2d.stroke();
98 c2d.restore();
99 c2d.save();
100 //Draw second hand
101 c2d.rotate(Math.PI / 30 * sec);
102 c2d.strokeStyle = "#E33";
103 c2d.beginPath();
104 c2d.moveTo(0, 20);
105 c2d.lineTo(0, -110);
106 c2d.stroke();
107 c2d.restore();
108
109 //Additional restore to goreport
back this ad before translate
to state
110 //Alternative would be to simply reverse the original translate
111 c2d.restore();
112 setTimeout(drawClock, 1000);
113 }
114 }

clock.html

?
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Clock</title>
5 <meta charset="UTF-8">
6
7 <script src="clock.js"></script>
report this ad
8 </head>
9 <body onload="drawClock()">
10
11 <h1>HTML 5 Clock</h1>
12
13 <canvas id="myClock" width=320 height=320>
14 Your browser does not support the HTML5 Canvas.
15 </canvas>
16
17 </body>
18 </html>

View more Tutorials:

ECMAScript, Javascript Tutorials


report this ad

report this ad

report this ad

ECMAScript, Javascript Tutorials

• Introducing Javascript and ECMAScript


• Quickstart with Javascript
• Alert, Confirm, Prompt Dialog Box in Javascript
• Quickstart with ECMAScript
• ECMAScript Variables
• Bitwise Operations
• ECMAScript Arrays
• ECMAScript Loops
• ECMAScript Functions
• ECMAScript Number
• ECMAScript Boolean
• ECMAScript Strings
• ECMAScript if else Statement
• ECMAScript Switch Statement
• ECMAScript Error Handling
• ECMAScript Date
• ECMAScript Modules
• ECMAScript setTimeout and setInterval Function
• Javascript Form Validation
• ECMAScript Web Cookies
• ECMAScript void Keyword
• Classes and Objects in ECMAScript
report this
• Class and inheritance simulation techniques ad
in ECMAScript
• Inheritance and polymorphism in ECMAScript
• Undertanding Duck Typing in ECMAScript
• ECMAScript Symbols
• ECMAScript Set Collection
• ECMAScript Map Collection
• Undertanding ECMAScript Iterables and Iterators
• ECMAScript Regular Expressions
• ECMAScript Promise, Async/Await
• Javascript Window
• Javascript Console
• Javascript Screen
report this ad
• Javascript Geolocation API
• Javascript Location
• Javascript History API
• Javascript Statusbar
• Javascript Locationbar
• Javascript Scrollbars
• Javascript Menubar
• JavaScript JSON
• Javascript MouseEvent
• Javascript WheelEvent
• Javascript KeyboardEvent
• Javascript FocusEvent
• Javascript InputEvent
• Javascript ChangeEvent
• Javascript DragEvent
• Javascript HashChangeEvent
• Javascript FileReader
• Javascript XMLHttpRequest
• Javascript Fetch API
• Parsing XML in Javascript with DOMParser
• Introducing Javascript HTML5 Canvas API

report this ad

report this ad

Newest Documents

• HTML Hyperlinks
• HTML Lists
report this ad
• HTML Images
• HTML Tables
• Installing Atom-Beautify
• Starting with HTML
• HTML Editors
• Installing Atom HTML Preview
• Introducing HTML
• Introducing Javascript HTML5 Canvas API
report this ad

report this ad

report this ad

o7planning.org

You might also like