Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
When you view a webpage containing canvas in different screens like that of mobile, pc, desktop or tablet, the size of the screen changes each time. So, it is necessary that the canvas resizes itself according to the screen for better user experience. In this article, we will learn how to resize an HTML5 canvas to fit the window. Let us first understand more about HTML5. HTML5 HTML (Hyper Text Markup Language) is a standard markup language for web pages. Using HTML, you can create your own website. HTML5 is the updated version of HTML with advanced technology used in ... Read More
Suppose you want the browser to do complex calculations on web page on clicking a word. This will take time. So, the web page will become unresponsive until the operation is completed. You need something which will do the required operation silently without affecting the user interface. So, how to solve this problem. In this article, we will discuss about how to solve such issues. The solution is Web workers. But what is a web worker? Let’s see. What is a Web Worker? A web worker is an object consisting of Javascript codes which runs behind the web page ... Read More
While doing a print style sheet, you need various HTML5 tags like , , , etc., which are used for different layout options to your web page which is to be printed. Chrome, Firefox and Internet Explorer9 enables the users to use such HTML5 tags in their browsers. However, Internet Explorer 6-8, Safari 4x and other such older browsers does not support those tags due to which we can’t apply those layout options in the web page. So, how can we use those HTML5 tags in Internet Explorer 8? For this, you can use html5.shiv. First let’s understand about ... 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 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
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
The min and max properties in HTML are used to specify the element's acceptable range of values. The max attribute sets the element's maximum value, whereas the min attribute sets the element's minimum value. For input restriction, the min and max attributes are used with the number and date input types. Syntax Following is the syntax to use min and max attributes Let’s dive into the following examples to get a clear idea of how to use min and max attributes in HTML. Using min &max Attribute The min and max attribute in HTML is ... Read More
HTML5 canvas API enables the developers to write text on an HTML page in the different ways such as in a canvas. Different browsers provide various kinds of font sizes on the HTML5 canvas specially when the font sizes are floating numbers like 2.456 px, 3.4 px etc. So, how to apply fractional font size to a text in an HTML5 canvas? First, let’s see what HTML5 canvas is. What is a HTML5 Canvas? Basically, canvas is rectangular enclosed area in a web page. By default, it has no border and content. The canvas element of HTML5 enables the user ... Read More
HTML5 canvas allows the users to draw or create 2D graphics in any web page. Suppose you want to crop a part of the canvas created on the web page and export it to any other area of the web page, then you can do it using javascript. For example, you have an image in the canvas and you want to export a part of image of dimension 400px * 260px. In this article, we will learn how to execute the above using few javascript codes. To learn further, let us first considering understanding what HTML5 Canvas is What is ... Read More