Found 2416 Articles for HTML

How to draw lines using HTML5 Canvas?

Samual Sam
Updated on 16-Dec-2021 12:24:21

552 Views

The HTML5 tag is used to draw graphics, animations, etc. using scripting. It is a new tag introduced in HTML5. Use the lineTo() method to draw lines using HTML5 canvas.You can try to run the following code to learn how to draw lines using HTML5 Canvas Example           HTML5 Canvas Tag                              var c = document.getElementById('newCanvas');          var ctx = c.getContext('2d');          // Drawing lines          ctx.beginPath();          ctx.moveTo(30, 30);          ctx.lineTo(180, 100);          ctx.moveTo(30, 10);          ctx.lineTo(260, 100);          ctx.stroke();           Output

How to draw a Bezier Curve with HTML5 Canvas?

Sai Subramanyam
Updated on 16-Dec-2021 10:18:06

1K+ Views

The HTML5 tag is used to draw graphics, animations, etc. using scripting. It is a new tag introduced in HTML5. The canvas element has a DOM method called getContext, which obtains rendering context and its drawing functions. This function takes one parameter, the type of context 2d.To draw a Bezier curve with HTML5 canvas, use the bezierCurveTo() method. The method adds the given point to the current path, connected to the previous one by a cubic Bezier curve with the given control points.You can try to run the following code to learn how to draw a Bezier curve on ... Read More

How to draw a rectangle on HTML5 Canvas?

Lakshmi Srinivas
Updated on 16-Dec-2021 09:54:41

2K+ Views

The HTML5 tag is used to draw graphics, animations, etc. using scripting. It is a new tag introduced in HTML5. The canvas element has a DOM method called getContext, which obtains rendering context and its drawing functions. This function takes one parameter, the type of context 2d.To draw a rectangle with HTML5 canvas, use the fillRect(x, y, width, height) method:You can try to run the following code to learn how to draw a rectangle with HTML5 CanvasExample           HTML5 Canvas Tag                       ... Read More

How to draw a polyline in HTML5 SVG?

karthikeya Boyini
Updated on 22-Nov-2023 04:21:13

1K+ Views

SVG stands for Scalable Vector Graphics and is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG.To draw a polygon in HTML SVG, use the SVG element. The element is to create a shape that consists of straight lines. The points attribute is the x and y coordinates for each corner.ExampleYou can try to run the following code to learn how to draw a polyline in HTML5 SVG: ... Read More

How to draw a polygon in HTML5 SVG?

Sharon Christine
Updated on 16-Dec-2021 09:29:25

4K+ Views

SVG stands for Scalable Vector Graphics and is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG.To draw a polygon in HTML SVG, use the SVG element. The element creates a graphic containing at least three sides. The points attribute is the x and y coordinates for each corner of the polygon.ExampleYou can try to run the following code to learn how to draw a polygon in HTML5 SVG. ... Read More

How to draw a circular gradient in HTML5?

Lakshmi Srinivas
Updated on 15-Jun-2020 11:43:34

168 Views

This method returns a CanvasGradient object that represents a radial gradient that paints along the cone given by the circles represented by the arguments. The first three arguments define a circle with coordinates (x1, y1) and radius r1 and the second a circle with coordinates (x2, y2) and radius r2.createRadialGradient(x0, y0, r0, x1, y1, r1)Here are the parameter values of the createRadialGradient() method −S.NoParameter & Description1x0x-coordinate- Starting point of the gradient2y0y- coordinate - Starting point of the gradient3r0Radius of the starting circle4x1x-coordinate - Ending point of the gradient5y1y- coordinate - Ending point of the gradient6r1Radius of the ending circleYou can ... Read More

How to preselect a value in a dropdown list of items in HTML forms?

Prabhas
Updated on 18-Jun-2020 06:01:47

5K+ Views

With HTML, you can easily create a simple drop down list of items to get user input in HTML forms. A select box also called drop down box provides an option to list down various options in the form of drop down list.You can also preselect a value in dropdown list of items in HTML forms. For that, add selected in the tag for the value you want to preselect.ExampleYou can try to run the following code to learn how to preselect value in a dropdown list of items works in HTML form −Live Demo       ... Read More

How do we use a simple drop-down list of items in HTML forms?

seetha
Updated on 12-May-2020 08:16:56

11K+ Views

With HTML, you can create a simple drop-down list of items to get user input in HTML forms. A select box also called drop-down box provides an option to list down various options in the form of drop-down list, from where a user can select one or more options. The tag is used to create a drop-down list in HTML, with the tag.Here’s the list of attributes of tag:Sr.NoAttribute & Description1NameUsed to give a name to the control which is sent to the server to be recognized and get the value.2SizeThis can be used to present a ... Read More

How we can group data in HTML forms?

Lokesh Badavath
Updated on 19-Oct-2022 06:58:03

4K+ Views

We use the tag, to group related data in HTML forms. This tag creates a box around the related elements on the web page. The tag is used inside the tag to give a caption to the group or name to the group. Syntax ….. Example 1 Following is an example to group data in HTML forms using the tag inside the tag − DOCTYPE html> Employee Details Employee Name Employee ID Employee Address Example 2 You can try to run the following code to group data in HTML forms − DOCTYPE html> Student Information: Student Name: Student Subject:

Why do we use reset button in HTML forms?

Lokesh Badavath
Updated on 19-Oct-2022 06:54:30

866 Views

The reset button is used to reset all the input fields in HTML forms. It gets added using the tag attribute type. The defines a reset button which resets all form values to its initial values. Syntax Example 1 An example to implement the usage of reset button in HTML forms is given below − DOCTYPE html> Enter Name Enter Age Enter Address Example 2 You can try to run the following code to reset button in HTML forms − DOCTYPE html> Student Name: Student Subject:

Advertisements