Found 10878 Articles for Web Development

The Canvas 2D API's CanvasRenderingContext2D method fillText() draws a text string at the given coordinates while filling the characters with the current fillStyle. On the canvas, filled text is drawn using the fillText() method. The text is black by default. Syntax Following is the syntax to fill text in HTML5 context.fillText(text, x, y, maxWidth); Where, X − The point on the x-axis where the text should start to be drawn in pixels. Y − The baseline's y-axis coordinate, in pixels, at which to start rendering the text. text − This is a string containing the text string that ... Read More

The arc() is a method of the canvas 2D API.The arc() method allows you to draw a circular arc. Syntax Following is the syntax to draw a circle with arc() in HTML5 arc(x, y, radius, startAngle, endAngle) arc(x, y, radius, startAngle, endAngle, counterclockwise) The arc() method generates a circular arc with a radius of radius, centred at (x, y). The path moves in the counter clockwise direction and begins at startAngle and finishes at endAngle (defaulting to clockwise). Parameters Following are the parameters of this method − X − The arc's center's horizontal coordinate. Y − The arc's ... Read More

HTML5 Geolocation API lets you share your location with your favorite websites. A JavaScript can capture your latitude and longitude and can be sent to backend web server and do fancy location-aware things like finding local businesses or showing your location on a map.The geolocation APIs work with a new property of the global navigator object ie. Geolocation object.The getCurrentPosition method retrieves the current geographic location of the device. The location is expressed as a set of geographic coordinates together with information about heading and speed. The location information is returned to a Position object.ExampleYou can try to run the ... Read More

The Canvas 2D API's lineTo() method, which connects the last point of the current sub-path to the given (x, y) coordinates, adds a straight line to the sub-path. The lineTo() method expands the canvas by adding a new point and drawing a line to it from the previous point (this method does not draw the line). Syntax Following is the syntax to draw a line lineTo(x, y) let’s look into the following examples to get a better idea on how to draw a line with line to in HTML5. Example 1 In the following example we are using function ... Read More

Drawing on the HTML canvas is to be done with JavaScript. Use the HTML DOM Method getElementById() and getContext() before drawing on the canvas.For that, follow some steps −You need to use the getElementById() method to find the canvas element.Use the getContext(), which is drawing object for the canvas. It provides the methods and properties for drawing.After that draw on the canvas.ExampleYou can try to run the following code to draw canvas on JavaScript −           HTML Canvas                              var canvas = document.getElementById("newCanvas");          var ctxt = canvas.getContext("2d");          ctxt.fillStyle = "#56A7E2";          ctxt.fillRect(0,0,250,120);          

HTML5 Geolocation API lets you share your location with your favorite websites. A Javascript can capture your latitude and longitude and can be sent to backend web server and do fancy location-aware things like finding local businesses or showing your location on a map. The geolocation coordinates specifies the geographic location of the device.Geolocation methods getCurrentPosition() and getPositionUsingMethodName() specify the callback method that retrieves the location information. These methods are called asynchronously to an object Position which stores the complete location information.The Position object specifies the current geographic location of the device. The location is expressed as a set of ... Read More

Specifies height of the canvas.The HTML tag is used to draw graphics, animations, etc. using scripting. The tag introduced in HTML5.Let’s see a simple element with two specific attributes width and height along with all the core HTML5 attributes like id, name, and class etc.Here are the attributes −AttributeValueDescriptionheight pixelsSpecifies height of the canvas.width pixelsSpecifies width of the canvas.ExampleYou can try to run the following code to learn how to use canvas to create a rectangle. The canvas element has a DOM method called getContext, which obtains rendering context and its drawing functions. This function takes one ... Read More

The HTML input type step attribute sets the legal number intervals. Steps are number steps like 0, 4, 8, 12, 16, etc. The step attribute can be used together with the max and min attributes to create a range of legal values.ExampleYou can try to run the following code to create a step of numbers with the input step attribute. Here, we are creating a step 4, so the valid input will be 4, 8, 12, 16, etc. On entering a number except that and pressing submit button, the following message will be visible: “Please enter a valid value”. It ... Read More

The required attribute in HTML is used o specify that the element should be filled before the form is submitted. If the field isn’t filled and the submit button is clicked, an error generates, which fails form submission. The error will be “Please fill out this field”.The required attribute can be used on input, select and textarea element.ExampleYou can try to run the following code to learn how to use the required attribute in HTML.           HTML placeholder attribute               Register                                    

To add background music on a web page, use … element. Also, use the autoplay attribute. This will run music in the background whenever the page loads.Set the width and height in a way the player hides on the web page. The loop attribute is added to specify whether the audio will start over again. Add the music file to the server and mention the link in src attribute.ExampleYou can try to run the following code to add background music to your web page:Live Demo           HTML background music             ... Read More