Found 10483 Articles for Web Development

How to draw lines using HTML5 Canvas?

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

710 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

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 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 star in HTML5 SVG?

Govinda Sai
Updated on 16-Dec-2021 09:34:31

9K+ 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. For drawing a star in HTML5 SVG, you need to set the x and y coordinates properly for each corner.ExampleYou can try to run the following code to learn how to draw a ... Read More

How to draw a polyline in HTML5 SVG?

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

2K+ 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

5K+ 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 rectangle in HTML5 SVG?

Yaswanth Varma
Updated on 27-Sep-2022 13:12:55

2K+ Views

SVG is a markup language based on XML that is used to describe two-dimensional vector graphics. SVG is essentially what HTML is to text when it comes to visuals. A rectangle is drawn on the screen via the element. The placement and shape of the rectangles on the screen are determined by six fundamental properties. Syntax Attributes X − The top-left x-axis coordinate. Y − The top-left y-axis coordinate. width − The rectangle's width. height − The rectangle's height. rx − The x-axis' roundness. ry − The y-axis' roundness. style − Indicate an inline style. ... Read More

How to use .svg files in a webpage?

Swarali Sree
Updated on 26-Jun-2020 06:33:18

700 Views

The svg files are Scalable Vector Graphics. You can add it to a web page using the , , or tag.The .svg file is to be referenced in the src attribute of the tag. Let’s see how to add it using the tag.You can try to run the following code to learn how to use .svg files in a web page. We have a smiley.svg file −           HTML SVG               Design          

Should I use , , or for SVG files?
Swarali Sree
Updated on 26-Jun-2020 06:36:09

450 Views

To add SVG files, you can use , or element in HTML. Choose any one of them according to your requirement. Here’s how you can add SVG, elementUse the tag for images without interaction.The disadvantage is you cannot manipulate images with JavaScript. elementThe element is used to define an embedded object within an HTML document. Use it to embed multimedia like audio, video, flash, etc in the web page.    Your browser does not support SVG elementThe tag wasn’t part of the HTML 4 specification and is new in HTML5. It validates in an HTML5 page.

How to add Scalable Vector Graphics (SVG) to your Web Page?

Samual Sam
Updated on 26-Jun-2020 06:30:10

237 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.Note: If you already have an SVG file, then add it using , or tags.To add SVG to web page, use element. Through this, you can easily embed SVG in HTML5 −You can try to run the following code to add scalable vector graphics (SVG) to the web page:       ... Read More

Advertisements