Found 132 Articles for HTML5

Drop Shadow with HTML5 Canvas

Yaswanth Varma
Updated on 11-Oct-2023 18:02:38

825 Views

In HTML5 canvas, you can add shadows to shapes, lines, texts, and images to give them the appearance of depth. You can use the following canvas context attributes to add shadows when using the HTML5 canvas. shadowOffsetX() shadowOffsetY() shadowColor() shadowBlur() shadowOffsetX() The property can be used to get or set a shadow's horizontal distance of a shadow from a page. To change the location of a shadow, you can use positive or negative numbers. Zero is the default value. Syntax Following is the syntax for shadowOffsetX() ctx.shadowOffsetX = h_distance; where h_distance belongs to the horizontal distance ... Read More

Draw Bezier Curve with HTML5 Canvas

Yaswanth Varma
Updated on 11-Oct-2023 17:48:18

457 Views

The bezierCurveTo() feature of HTML5 Canvas can be used to generate a Bezier curve. The context point, two control points, and an ending point are used to define Bezier curves. Bezier curves, in contrast to quadratic curves, are specified using two control points rather than one, allowing us to produce more intricate curves. The lineWidth, strokeStyle, and lineCap attributes can be used to customise the look of bezier curves. What are Bezier curves Bezier curves may have appeared in desktop publishing and graphics programs. Beziers offer a great deal more form control. Because the beginning of the curve follows its ... Read More

HTML5 Fonts for Macintosh Systems

Yaswanth Varma
Updated on 11-Oct-2023 17:13:35

91 Views

Due to the fact that the browser doesn't need to download any font files because it is already using one, utilizing the system font of a specific operating system by default can improve efficiency. But it is true of any web-safe typeface. System fonts have the advantage of matching the fonts that the current OS uses, making them visually pleasing. There are some fonts from the Microsoft list that are also compatible with Macintosh Systems. Those are Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Impact, Trebuchet, Verdana, Symbol, Webdings and Times New Roman The fonts ... Read More

HTML5 Character Encodings

Yaswanth Varma
Updated on 11-Oct-2023 17:07:11

105 Views

In the following article, we are going to learn about HTML5 character encodings. A technique for specifying a mapping between bytes and text is character encoding. We must select the correct character encoding in order for an HTML content to appear appropriately. Need of character encoding An HTML or XML page's encoding should always be specified. In the absence of this, characters in your material run the danger of being misinterpreted. This isn't simply a problem for human readability; increasingly, machines must also be able to comprehend your data. Let’s look into the following types for better understanding of HTML5 ... Read More

Microdata API in HTML5

Yaswanth Varma
Updated on 11-Oct-2023 17:01:21

257 Views

In HTML5, Microdata are used to nest metadata inside of already existing web page content. With this approach, machine-readable data may be easily inserted into HTML documents with a clear parsing paradigm. By using microdata, we may create our own unique elements and begin incorporating unique attributes into our web pages. Microdata is made up of a collection of name-value pairs. Items are a collection of name-value pairs, and each name-value property is referred to as a property. Regular elements are used to represent items and properties. HTML5 Microdata Global Attribute The following five global properties are introduced by ... Read More

HTML5 Canvas fit to window

Riya Kumari
Updated on 12-Oct-2022 14:29:12

9K+ Views

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

Fractional font sizes for HTML5 Canvas?

Riya Kumari
Updated on 12-Oct-2022 13:24:15

549 Views

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

How to handle errors in HTML5 Web Workers?

Riya Kumari
Updated on 12-Oct-2022 14:11:36

1K+ Views

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

Crop Canvas / Export HTML5 Canvas with certain width and height

Riya Kumari
Updated on 12-Oct-2022 13:20:05

1K+ Views

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

Internet Explorer 8 will not modify HTML5 tags in print stylesheet

Riya Kumari
Updated on 12-Oct-2022 14:04:07

171 Views

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

Advertisements