One of the features of the <canvas> element is the possibility of using images. These can be used for different purposes. You can use external images in any format supported by the browser (e.g., PNG, GIF, or JPEG). As a source, you can also use the image created by other canvas elements. Importing images into… Continue reading Canvas Images
Month: October 2022
Canvas Text
HTML5 canvas allows creating text using different font and text properties presented below: Properties and Methods Property Description font It returns the current font settings and can be set to change the font. textAlign It returns the current text alignment settings and can be set to change the alignment. The property has the following values:… Continue reading Canvas Text
Canvas Gradients
A gradient, in general, is a pattern of colors that changes from one color to another. HTML5 Canvas gradients are patterns of color used to fill circles, rectangles, lines, text, and so on, and the canvas shapes aren’t limited to solid colors. There are two types of gradients: createLinearGradient(x,y,x1,y1) – for creating a linear gradient createRadialGradient(x,y,r,x1,y1,r1) –… Continue reading Canvas Gradients
Canvas Coordinates
The HTML canvas is considered to be a two-dimensional grid, the upper-left corner of which has the coordinates (0,0). Drawing a Line The methods below are used to draw a straight line on a canvas: moveTo(x,y), which specifies the starting point of the line lineTo(x,y), which specifies the ending point of the line Use one… Continue reading Canvas Coordinates
Canvas Drawing
The JavaScript should be used to draw on the canvas. We are going to do with step by step. 1. Find the Canvas Element To find the canvas element use the HTML DOM method: getElementById(): 2. Create a drawing object Use the getContext() HTML object, with properties and methods: 3. Draw on the Canvas Element… Continue reading Canvas Drawing
Canvas Intro
The HTML <canvas> element is used for drawing graphics via scripting. It is only a container for graphics. You need JavaScript to draw the graphics. Canvas has multiple methods for drawing paths, circles, boxes, text, as well as for adding images. Canvas can be used to draw colorful texts, with or without animation. Besides, they can be… Continue reading Canvas Intro
HTML
The <applet> tag was used to define an embedded Java applet. The use of Java applets is now deprecated as most browsers no longer support the use of plug-ins, including the Java plug-in. The <applet> element can contain other HTML tags and text between its opening and closing tags. Some browsers still support the <applet> tag, but they require additional plug-in… Continue reading HTML
HTML Tag
The <address> tag is used to provide contact information about the owner of sites or the author of the article. It can contain email, phone, address, link to the site, and so on. Syntax The <address> tag comes in pairs. The content is written between the opening (<address>) and closing (</address>) tags. Most browsers add a line break before… Continue reading HTML
TagHTML Tag
The <acronym> tag defines an acronym or abbreviation. To decipher an acronym, the global title attribute is used (displayed as a pop-up text prompt when you hover the mouse over an acronym). The <acronym> tag is a deprecated HTML tag and not supported in HTML5. Use the <abbr> tag instead. Syntax The <acronym> tag comes in pairs. The content is written between the opening (<acronym>) and closing… Continue reading HTML Tag
HTML Tag
The browser renders the characters inside the <abbr> tag as an abbreviation or an acronym. To decipher the abbreviation, the global title attribute is used (displayed as a pop-up text prompt when you hover the mouse over the abbreviation). The content of the <abbr> tag in some browsers can be marked with a dotted underscore. Syntax The <abbr> tag comes in pairs. The… Continue reading HTML Tag