HTML5 new element, HTML5 Canvas

HTML5 new elements

Since 1999 HTML 4.01 has changed a lot, and today, several of the HTML 4.01 have been deprecated, and these elements have been deleted or redefined in HTML5.

In order to better deal with today's internet applications, HTML5 added a lot of new elements and features, such as: Graphic drawing, multimedia content, better page structure, better form processing, and several API drag-and-drop elements, positioning, including Web application caching, storage, web workers, and so on.

<canvas> new elements

label	Description
<canvas>	Labels define graphs, tables, and other images. The label's JavaScript-based drawing API

New multimedia elements

label	Description
<audio>	Defining audio Content
<video>	Defining videos (video or movie)
<source>	Define multimedia resources <video> and <audio>
<embed>	Define embedded content, such as plugins.
<track>	Specify external text tracks for media such as <video> and <audio> elements.

New Form elements

label	Description
<datalist>	Defines a list of options. Use this element in conjunction with the INPUT element to define the possible values for input.
<keygen>	Specifies the key pair generator field used for the form.
<output>	Defines different types of output, such as the output of a script.

New semantic and structural elements

HTML5 provides new elements to create a better page structure:

label	Description
<article>	Defines a separate content area for a page.
<aside>	Defines the sidebar content of the page.
<bdi>	Allows you to set a piece of text away from the text orientation setting of its parent element.
<command>	Define a command button, such as a radio button, a check box, or a button
<details>	Details used to describe a part of a document or document
<dialog>	Define dialog boxes, such as prompt boxes
<summary>	Label contains the title of the details element
<figure>	Specify separate stream content (images, charts, photos, code, and so on).
<figcaption>	Define the title of the <figure> element
<footer>	Defines the footer of a section or document.
	Defines the header area of the document
<mark>	Defines the text with a token.
<meter>	Define weights and measures. Measures that are used only for the known maximum and minimum values.
<nav>	Defines the part of the navigation link.
<progress>	Defines the progress of any type of task.
<ruby>	Defines a ruby annotation (Chinese phonetic notation or character).
<rt>	Defines the interpretation or pronunciation of characters (Chinese phonetic symbols or characters).
<rp>	Used in Ruby annotations to define what is displayed by browsers that do not support ruby elements.
<section>	Define the sections (section, section) in the document.
<time>	Defines the date or time.
<wbr>	Specifies where in the text to fit the line break.

Elements that have been removed

The following HTML 4.01 elements have been deleted in HTML5:

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>
  • HTML5Canvas

    <canvas> tags define graphs, tables and other images, and you must use scripts to draw graphics.

    Draw a red rectangle on the canvas (canvas), a gradient rectangle, a colored rectangle, and some colored text.

    
    What is Canvas?

    HTML5 <canvas> elements are used for drawing drawings, which are done through scripts (usually JavaScript).

    <canvas> tags are just graphics containers, and you must use scripts to draw graphics.

    There are several ways you can use Canva to draw paths, boxes, circles, characters, and add images.

    Browser support

    The number in the table represents the first browser version number that supports the <canvas> element.

    Elements
    <canvas>	4.0	9.0	2.0	3.1	9.0

    Create a canvas (canvases)

    A canvas is a rectangular box in a Web page that is drawn by the <canvas> element.

    Note: The <canvas> element does not have a border and content by default.

    <canvas> simple examples are as follows:

    <canvas id= "MyCanvas" width= "height=" ></canvas>

    Note: labels typically need to specify an id attribute (often referenced in the script), and the width and Height properties define the size of the canvas.

    tip: You can use multiple <canvas> elements in an HTML page.

    Use the Style property to add a border:

    Example <canvas id= "MyCanvas" width= "$" height= "100"
    Style= "border:1px solid #000000;" >
    </canvas>
    Try it?
    Use JavaScript to draw images

    The canvas element itself is not capable of drawing. All the drawing work must be done inside JavaScript:

    Examples <script>
    var C=document.getelementbyid ("MyCanvas");
    var Ctx=c.getcontext ("2d");
    Ctx.fillstyle= "#FF0000";
    Ctx.fillrect (0,0,150,75);
    </script>
    Try it?

    Instance parsing:

    First, find the <canvas> element:

    var C=document.getelementbyid ("MyCanvas");

    Then, create the context object:

    var Ctx=c.getcontext ("2d");

    GetContext ("2d") objects are built-in HTML5 objects that have a variety of drawing paths, rectangles, circles, characters, and methods for adding images.

    The following two lines of code draw a red rectangle:

    Ctx.fillstyle= "#FF0000";
    Ctx.fillrect (0,0,150,75);

    Setting the FillStyle property can be a CSS color, gradient, or pattern. FillStyle default setting is #000000 (black).

    The FillRect (x,y,width,height) method defines how the rectangle is currently filled.

    Canvas coordinates

    A canvas is a two-dimensional grid.

    The upper-left corner coordinates of the canvas are (0,0)

    The FillRect method above has parameters (0,0,150,75).

    This means: Draw the 150x75 rectangle on the canvas, starting at the top left corner (0,0).

    Coordinate instances

    As shown, the X and Y coordinates of the canvas are used to position the drawing on the canvas. The mouse moves the rectangle box, showing the positioning coordinates.

    Xycanvas-Path

    To draw a line on the canvas, we will use the following two methods:

    • MoveTo (x, y) defines line start coordinates
    • LineTo (x, y) defines line end coordinates

    To draw a line we must use the "ink" method, just like a stroke ().

    Instance

    Defines the start coordinate (0,0), and the end coordinate (200,100). Then use the stroke () method to draw the line:

    Javascript:

    var C=document.getelementbyid ("MyCanvas");
    var Ctx=c.getcontext ("2d");
    Ctx.moveto (0,0);
    Ctx.lineto (200,100);
    Ctx.stroke ();
    Try it?

    To draw a circle in the canvas, we will use the following methods:

    • Arc (X,y,r,start,stop)

    In fact, we used the "ink" method when drawing a circle, such as a stroke () or fill ().

    Instance

    Use the Arc () method to draw a circle:

    Javascript:

    var C=document.getelementbyid ("MyCanvas");
    var Ctx=c.getcontext ("2d");
    Ctx.beginpath ();
    Ctx.arc (95,50,40,0,2*MATH.PI);
    Ctx.stroke ();
    Try it?
    Canvas-Text

    Using canvas to draw text, important properties and methods are as follows:

    • font-Define Fonts
    • Filltext (text,x,y)-Draws solid text on canvas
    • Stroketext (text,x,y)-Draw hollow text on canvas

    Using Filltext ():

    Instance

    Use the "Arial" font to draw a high 30px of text (solid) on the canvas:

    Javascript:

    var C=document.getelementbyid ("MyCanvas");
    var Ctx=c.getcontext ("2d");
    ctx.font= "30px Arial";
    Ctx.filltext ("Hello World", 10,50);
    Try it?

    Using Stroketext ():

    Instance

    Use the "Arial" font to draw a high 30px text (hollow) on the canvas:

    Javascript:

    var C=document.getelementbyid ("MyCanvas");
    var Ctx=c.getcontext ("2d");
    ctx.font= "30px Arial";
    Ctx.stroketext ("Hello World", 10,50);
    Try it?
    Canvas-Gradient

    Gradients can be filled in rectangles, circles, lines, text, and so on, and various shapes can define different colors themselves.

    There are two different ways to set up the canvas gradient:

    • Createlineargradient (x,y,x1,y1)-Create a line gradient
    • Createradialgradient (x,y,r,x1,y1,r1)-Create a radial/circle gradient

    When we use a Gradient object, you must use two or more stop colors.

    The Addcolorstop () method specifies that the color stops, and the parameters are described using coordinates, which can be between 0 and 1.

    Using a gradient, set the value of FillStyle or Strokestyle to a gradient, and then draw a shape, such as a rectangle, text, or a line.

    Using Createlineargradient ():

    Instance

    Creates a linear gradient. Fill the rectangle with a gradient:

    Javascript:

    var C=document.getelementbyid ("MyCanvas");
    var Ctx=c.getcontext ("2d");
    
    Create Gradient
    var grd=ctx.createlineargradient (0,0,200,0);
    Grd.addcolorstop (0, "red");
    Grd.addcolorstop (1, "white");
    
    Fill with Gradient
    CTX.FILLSTYLE=GRD;
    Ctx.fillrect (10,10,150,80);
    Try it?

    Using Createradialgradient ():

    Instance

    Creates a radial/circular gradient. Fill the rectangle with a gradient:

    Javascript:

    var C=document.getelementbyid ("MyCanvas");
    var Ctx=c.getcontext ("2d");
    
    Create Gradient
    var grd=ctx.createradialgradient (75,50,5,90,60,100);
    Grd.addcolorstop (0, "red");
    Grd.addcolorstop (1, "white");
    
    Fill with Gradient
    CTX.FILLSTYLE=GRD;
    Ctx.fillrect (10,10,150,80);
    Try it?
    Canvas-Images

    To place an image on the canvas, use the following methods:

    • DrawImage (image,x,y)
    Using images:
    Instance

    Place an image on the canvas:

    Javascript:

    var C=document.getelementbyid ("MyCanvas");
    var Ctx=c.getcontext ("2d");
    var Img=document.getelementbyid ("Scream");
    Ctx.drawimage (img,10,10);
    Try it?

HTML5 new element, HTML5 Canvas