The stroketext() method renders the provided text using the current font, linewidth, and strokestyle properties at the specified place. The path won't be affected by any subsequent fill() or stroke() calls because this method draws directly to the canvas without changing the original route. Syntax Following is the syntax for stroke text in HTML ctx.strokeText(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 − A string containing the text ... 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.Geolocation is complicated, and it is very much required to catch any error and handle it gracefully.The geolocations methods getCurrentPosition() and watchPosition() make use of an error handler callback method which gives PositionError object. This object has following two properties −PropertyTypeDescriptionCodeNumberContains a numeric code for the error.messageStringContains a numeric code for the error.The following table describes the possible ... Read More

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

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

If you want to set a hint for text area or input field, then use the HTML placeholder attribute. The hint is the expected value, which gets displayed before the user enters a value, for example, name, details, etc.ExampleYou can try to run the following code to learn how to use placeholder attribute in HTML.           Register                                              

The HTML element is used to add audio to web page. To play sound file in the background on a web page, use the … 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.You can try to run the following code to play a sound file in a web page in the backgroundExampleLive Demo           HTML background music ... Read More