Django Tutorial

  1. Django is a Python-based web framework that allows you to quickly create efficient web applications.
  2. When you’re building a website, you always need a similar set of components: a way to handle user authentication (signing up, signing in, signing out)
  3. Django gives you ready-made components to use and that too for rapid development.
  4. Django is based on MVT (Model-View-Template) architecture.
  5. pip install django

Creating a Basic Project

  1. If we want to create a Django project, we have to use some commands.
  2. django-admin startproject projectName
  3. A New Folder with name projectName will be created. In that folder we have manage.py file, if we want to run our server we have to call that file from that location.
  4. cd projectName
    python manage.py runserver django1
  5. Then it will display the URL to open that website, open that URL in browser, there you can see welcome page. Apart from this we have another webpage called admin, to open that webpage add /admin in the URL.
  6. django3 django4
  7. Django is famous for its unique and fully managed app structure.
  8. For every functionality, an app can be created like a completely independent module.
  9. To create an app we have one more command.
  10. python manage.py startapp projectApp django2
  11. In this, Project Structure is very important. So lets have a look...
  12. django5


Create our own webpage

  1. To consider the app in your project you need to specify your project name in INSTALLED_APPS list in settings.py
  2. django6
  3. In our webpage it is showing default webpage. Now we are changing that to our own custom page. In this Django project one more important part is URL's, if we want to open different webpages in browser we have to focus on URL of that webpage. So at first we have to update urls.py file under main project.
  4. In urls.py file we have to include our app's url file. From there we can open our desired webpage and we can display that in browser.
  5. django7
  6. Now we have to create one file under app, save that file as urls.py. From this file we can call different webpages based on URL.
  7. In that file we have to import views file, and we have to call function from the views.py file based on the received URL.
  8. django8
  9. Last and Final step is to create a function in views.py file, with the same name as used in urls.py page.
  10. django9


settings.py
INSTALLED_APPS = [
    'my_first_app',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
my_first_project/urls.py
from django.contrib import admin
from django.urls import path
from django.urls import include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include("my_first_app.urls"))
]
my_first_app/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('',views.my_welcome_page)
]
my_first_app/views.py
from django.shortcuts import render
from django.shortcuts import HttpResponse

# Create your views here.
def my_welcome_page(request):
    return HttpResponse("Welcome to our webpage")

HTML Headings

  1. A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the webpage. When you place the text within the heading tags it is displayed on the browser in the bold format and size of the text depends on the number of heading.
  2. There are six different HTML headings which are defined with the <h1> to <h6> tags.
  3. <h1> defines the most important heading. <h6> defines the least important heading. Search engines use the headings to index the structure and content of your web pages.
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <h1>This is heading 1</h1>
 <h2>This is heading 2</h2>
 <h3>This is heading 3</h3>
 <h4>This is heading 4</h4>
 <h5>This is heading 5</h5>
 <h6>This is heading 6</h6>
</body>
</html>

HTML Paragraphs

  1. HTML paragraph or HTML p tag is used to define a paragraph in a webpage.
  2. It is a notable point that a browser itself add an empty line before and after a paragraph.
  3. The HTML <p> element defines a paragraph.
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <p>This is a paragraph.</p>
 <p>This is another paragraph.</p>
</body>
</html>

HTML Formatting

  1. HTML also defines special elements for defining text with a special meaning.
  2. HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
  3. Formatting elements were designed to display special types of text. 
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <b>This text is bold</b>
 <strong>This text is strong</strong>
 <i>This text is italic</i>
 <em>This text is emphasized</em>
 <h2>HTML <small>Small</small> Formatting</h2>
 <h2>HTML <mark>Marked</mark> Formatting</h2>
 <p>My favorite color is <del>blue</del> red.</p>
 <p>My favorite <ins>color</ins> is red.</p>
 <p>This is <sub>subscripted</sub> text.</p>
 <p>This is <sup>superscripted</sup> text.</p>
</body>
</html>

HTML Comments

  1. Comment tags are used to insert comments in the HTML source code.
  2. You can add comments to your HTML source by using the following syntax:
    <!-- Write your comments here -->
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 Hello Welcome To HTML Tutorials
 <!-- Write your comments here -->
 <!-- Programming Tutorials In Telugu -->
</body>
</html>

HTML Background

  1. These are the attributes to change web page looking.
  2. Attributes are used inside a tag and it follows att_name="value" format. Ex : text="red"
  3. bgcolor attribute is used to change the background-color in a web page.
  4. text attribute is used to change the text color in a web page.
  5. background attribute is used to set an image as a background in a web page. Here we have to give the whole image url with extension.
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body bgcolor="red" text="white">
 Hello Welcome To HTML Tutorials
</body>
</html>
<!DOCTYPE HTML>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body background="html1.png" text="yellow">
 Hello Welcome To HTML Tutorials
</body>
</html>

HTML Images

  1. You can insert any image in your web page by using <img> tag.
  2. The simple syntax to use this tag is <img src="Image URL" ... attributes-list/>
  3. The src attribute is used to give the address of the image with extension.
  4. The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.
  5. You can set image width and height based on your requirement using&n width and height attributes.
  6. By default image will have a border around it, you can specify border thickness in terms of pixels/value using border attribute. A thickness of 0 means, no border around the picture.
  7. By default image will align at the left side of the page, but you can use align attribute to set it in the center or right.
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <img src="html.png" alt="HTML5" height="200" width="250">
 <img src="css3.png" alt="css3" height="200" width="250">
</body>
</html>

HTML Tables

  1. The HTML tables allow to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
  2. The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td>tag is used to create data cells.
  3. Here border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border then you can use border="0".You can also set border color also using bordercolor attribute.
  4. Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell.
  5. There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your table cells.
  6. cellpadding represents the distance between cell borders and the content within a cell.
  7. The cellspacing attribute defines the width of the border.
  8. You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.
  9. bgcolor attribute is used to set background color for whole table or just for one cell.
  10. background attribute is used to set background image for whole table or just for one cell.
  11. You can set a table width and height using width and height attrubutes.
  12. The caption tag will serve as a title or explanation for the table and it shows up at the top of the table.
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
   <table border="2" cellpadding="3" cellspacing="3"
  bgcolor="aqua">
      <tr>
         <th colspan="3" bgcolor="red">Programming Tutorials</th>
      </tr>
      <tr>
         <td bgcolor="white">HTML</td>
      <td rowspan="4" bgcolor="orange">In Telugu</td>
      <td bgcolor="white">CSS</td>
      </tr>
      <tr>
      <td bgcolor="pink">SQL</td>
      <td bgcolor="pink">Java</td>
      </tr>
      <tr>
      <td bgcolor="lightgreen">JavaScript</td>
      <td bgcolor="lightgreen">Python</td>
      </tr>
      <tr>
      <td bgcolor="yellow">PHP</td>
      <td bgcolor="yellow">go</td>
      </tr>
 </table>
</body>
</html>

HTML Lists

  1. HTML offers three ways for specifying lists of information. All lists must contain one or more list elements.
  2. <ul> - An unordered list. This will list items using plain bullets.
    The Unordered list starts with <ul> tag and list items start with the <li> tag.
    You can use type attribute for <ul> tag to specify the type of bullet you like. By default it is a disc. But you can change to square or circle or none.
  3. <ol> - An ordered list. This will use different schemes of numbers to list your items.
    The numbering starts at one and is incremented by one for each successive ordered list tagged with <li>.
    You can use type attribute for <ol> tag to specify the type of numbering you like. By default it is a number.
    But you can change to Roman Numbers(I),Small roman numbers(i), alphabets(A), small aplhabets (a).
    You can use start attribute for <ol> tag to specify the starting point of numbering you need.
  4. <dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary.
    <dl> - Defines the start of the list.
    <dt> - Defines a term.
    <dd> - Defines term definition
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <h2>An Unordered HTML List</h2>
 <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
 </ul< 
 <h2>An Ordered HTML List</h2>
 <ol>
    <li>SQL</li>
    <li>Java</li>
    <li>Python</li>
 </ol>
 <h2>HTML Description Lists</h2>
 <dl>
   <dt>Coffee</dt>
     <dd>- black hot drink</dd>
    <dt>Milk</dt>
     <dd>- white cold drink</dd>
 </dl>
 </body>
</html>
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <ul type="square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
 </ul< 
 <ul type="circle">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
 </ul>
 <ol type="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
 </ol< 
 <ol type="i">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
 </ol>
</body>
</html>

HTML Links

  1. A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.
  2. Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images.
  3. A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a>tag and the closing </a> tag becomes part of the link.
  4. Following is the simple syntax to use <a> tag.<a href="Document URL" ... attributes-list>Link Text</a>
  5. target attribute is used to specify the location where linked document is opened. Possible options are
    _blank Opens the linked document in a new window or tab.
    _self Opens the linked document in the same frame.
    _parent Opens the linked document in the parent frame.
    _top Opens the linked document in the full body of the window.
  6. You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body>tag.
  7. You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple, you just need to give complete URL of the downloadable file.
  8. It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text.
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
If you want to goto google
  <a href="http://www.google.com" target="_blank">Click Here</a>
</body>
</html>

HTML Fonts

  1. Fonts play very important role in making a website more user friendly and increasing content readability.
  2. HTML tag to add style, size, and color to the text on your website.
  3. You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.
  4. You can set font face using face attribute.
  5. You can set font color using color attribute.
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
<font size="3" color="red">This is some text!</font> <br>
<font size="7" color="blue">This is some text!</font> <br>
<font face="verdana" color="green">This is some text!</font><br>
</body>
</html>

HTML Forms

  1. HTML Forms are required when you want to collect some data from the site visitor.For example during user registration you would like to collect information such as name, email address, credit card, etc.
  2. There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.
  3. The HTML <form> tag is used to create an HTML form.
  4. Apart from common attributes, following is a list of the most frequently used form attributes:
    action Backend script ready to process your passed data.
    method Method to be used to upload data. The most frequently used are GET and POST methods.
    target Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
  5. There are different types of form controls that you can use to collect data using HTML form:
    Those are:
    Single-line text input controls <input type="text" name="name"/>
    Password input controls <input type="password" name="pwd" />
    Email input controls <input type="email" name="email" />
    Number input controls <input type="number" name="number" />
    Date input controls <input type="date" name="date" />
    Multi-line input controls <textarea rows="5" cols="50" name="description"/>
    Checkbox controls <input type="checkbox" name="m1" />
    Radio Button controls <input type="radio" name="male" />
    Select Box controls <select name="select" ><option value="Maths">Maths</option>
    File upload box <input type="file" name="fileupload" accept="image/*" />
    Button controls <input type="submit" name="submit" value="Submit" />
    <input type="reset" name="reset" value="Reset" />
    <input type="button" name="ok" value="OK" />
    <input type="image" name="imagebutton" src="/html/images/logo.png" />
    <input type="color" name="color" />
    search <input type="search" name="search" />
    url <input type="url" name="url" />
  6. Some attributes of form controls size, maxlength, checked, multiple, placeholder, value, pattern
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
<form action="html.html" method="get" target="_self">
  Name: <input type="text" name="fname"><br><br>
  Password: <input type="password" name="pwd">br><br>
  Email: <input type="email" name="email">
  Phone Number:<input type="number" name="number">
  DOB:<input type="date" name="date"> 
  Address:<textarea rows="5" cols="50" name="description">
  </textarea>
  Hobbies:<input type="checkbox" name="m1">
  Gender:<input type="radio" name="male">
  Branch:<select name="select" ><option value="cse">CSE</option>
  Photo:<input type="file" name="fileupload" accept="image/*">
  Search:<input type="search" name="search"> 
  url: <input type="url" name="url">
  <input type="submit" value="Submit">
  <input type="reset" name="reset" value="Reset"> 
  <input type="button" name="ok" value="OK">
  <input type="color" name="color"> 
</form>
</body>
</html>

HTML Marquee

  1. An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings.
  2. This is created by using HTML <marquee> tag.
  3. <marquee att_name="att_value".. more attributes> Text here </marquee>
  4. Attributes are:
    width This specifies the width of the marquee. This can be a value like 10 or 20% etc.
    height This specifies the height of the marquee. This can be a value like 10 or 20% etc.
    direction This specifies the direction in which marquee should scroll. This can be a value like up, down, left or right.
    scrolldelay This specifies how long to delay between each jump. This will have a value like 10 etc.
    scrollamount This specifies the speed of marquee text. This can have a value like 10 etc.
    loop This specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.
    bgcolor This specifies background color in terms of color name or color hex value.
    hspace This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.
    vspace This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
    <marquee>This is basic example of marquee</marquee>
    <marquee direction = "right">The direction of text
       will be from left to right.</marquee>
    <marquee scrolldelay="10">Using Scroll Delay</marquee>
    <marquee scrollamount="2">Using Scroll Amount</marquee>
    <marquee bgcolor="yellow">Using Background Color</marquee>
</body>
</html>

HTML Audio

  1. HTML audio tag is used to define sounds such as music and other audio clips. Currently there are three supported file format for HTML 5 audio tag.
  2. autoplay Specifies that the audio will start playing as soon as it is ready.
  3. controls Specifies that audio controls should be displayed (such as a play/pause button etc).
  4. loop Specifies that the audio will start over again, every time it is finished.
  5. src Specifies the URL of the audio file.
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
<audio controls autoplay loop>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
</body>
</html>

HTML Video

  1. HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files such as a movie clip, song clip on the web page.
  2. autoplay Specifies that the audio will start playing as soon as it is ready.
  3. controls Specifies that audio controls should be displayed (such as a play/pause button etc).
  4. loop Specifies that the audio will start over again, every time it is finished.
  5. src Specifies the URL of the audio file.
  6. height pixels Sets the height of the video player.
  7. widthSets the width of the video player.
  8. poster Specifies an image to be shown while the video is downloading, or until the user hits the play button
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
<video width="300" height="200" controls autoplay loop>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</body>
</html>

HTML 5

  1. HTML5 tutorial provides details of all 40+ HTML tags including audio, video, header, footer, data, datalist, article etc.
  2. HTML5 is a next version of HTML. Here, you will get some brand new features which will make HTML much easier. These new introducing features make your website layout clearer to both website designers and users.
  3. There are some elements like <header>, <footer>, <nav> and <article> that define the layout of a website.
  4. It allows you to play a video and audio file.
  5. <article>-This element is used to define an independent piece of content in a document, that may be a blog, a magazine or a newspaper article.
  6. <footer> It defines a footer for a section.
  7. <header> It defines a header for a section.
  8. <main> It defines the main content of a document.
  9. <nav>-It is used to define the navigation link in the document.
  10. <progress>-It specifies the progress of the task.
  11. <section>- It defines a section in the document.
  12. <time>- It is used to define a date/time.
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <nav>
  <a href="/html.html">HTML</a> |
   <a href="/css.html">CSS</a> |
   <a href="/js/">JavaScript</a> |
   <a href="/jquery/">jQuery</a>
 </nav>
 <br><br>
   <progress value="35" max="100">
</body>
</html>

HTML Canvas

  1. The HTML <canvas> element is used to draw graphics on a web page.
  2. The graphic below is created with <canvas>.
  3. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
What we can do with Canvas?
  1. Canvas can draw colorful text, with or without animation.
  2. Canvas has great features for graphical data presentation with an imagery of graphs and charts.
  3. Canvas objects can move. Everything is possible: from simple bouncing balls to complex animations.
  4. Canvas can respond to JavaScript events.Canvas can respond to any user action (key clicks, mouse clicks, button clicks, finger movement).
  5. Canvas' methods for animations, offer a lot of possibilities for HTML gaming applications.

Creating Canvas

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
</body>
</html>

Drawing Lines

  1. First of all, you must find the <canvas> element.
    This is done by using the HTML DOM method getElementById():
    var canvas = document.getElementById
    ("myCanvas");
  2. Secondly, you need a drawing object for the canvas.
    The getContext() is a built-in HTML object, with properties and methods for drawing:
    var ctx = canvas.getContext("2d");
  3. Finally, you can draw on the canvas.
Canvas Coordinates:
1) The HTML canvas is a two-dimensional grid.
2) The upper-left corner of the canvas has the coordinates (0,0)
Draw a Line:
1) To draw a straight line on a canvas, use the following methods:
moveTo(x,y) - defines the starting point of the line
lineTo(x,y) - defines the ending point of the line
2) To actually draw the line, you must use one of the "ink" methods, like stroke().
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(200,100);
  ctx.stroke();
 </script>
</body>
</html>

Drawing Circles

1) To draw a circle on a canvas, use the following methods:
beginPath() - begins a path
arc(x,y,r,startangle,endangle) - creates an arc/curve.
2) To create a circle with arc() Set start angle to 0 and end angle to 2*Math.PI.
3) The x and y parameters define the x- and y-coordinates of the center of the circle.
4) The r parameter defines the radius of the circle.
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95,50,40,0,2*Math.PI);
  ctx.stroke();
 </script>
</body>
</html>

Adding Text

1) To draw text on a canvas, the most important property and methods are:
font - defines the font properties for the text
fillText(text,x,y) - draws "filled" text on the canvas
strokeText(text,x,y) - draws text on the canvas (no fill)
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "23px Arial";
  ctx.fillText("Programming Tutorials",10,50);
  ctx.strokeText("In Telugu",170,100);
 </script>
</body>
</html>

Linear Gradient

1) Gradients can be used to fill rectangles, circles, lines, text, etc.
2) Shapes on the canvas are not limited to solid colors.
3) CreateLinearGradient(x,y,x1,y1) - creates a linear gradient
4)Once we have a gradient object, we must add two or more color stops.
5) The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
6) To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var grd = ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(0,"green");
  grd.addColorStop(1,"white");
  ctx.fillStyle = grd;
  ctx.fillRect(10,10,150,80);
 </script>
</body>
</html>

Radial Gradient

1) Gradients can be used to fill rectangles, circles, lines, text, etc.
2) Shapes on the canvas are not limited to solid colors.
3) CreateRadialGradient(x,y,r,x1,y1,r1) - creates a radial/circular gradient 4)Once we have a gradient object, we must add two or more color stops.
5) The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
6) To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).
<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
 var grd = ctx.createRadialGradient(75,50,5,90,60,100);
  grd.addColorStop(0,"red");
  grd.addColorStop(1,"aqua");
  ctx.fillStyle = grd;
  ctx.fillRect(10,10,150,80);
 </script>
</body>
</html>