Canvas for HTML5 labels

Canvas for HTML5 labels
1: What is Canvas?
HTML5 canvas elements use JavaScript to draw images on webpages.
A canvas is a rectangular area that allows you to control each pixel.
Canvas has multiple ways to draw paths, rectangles, circles, characters, and add images.


2. Create a Canvas element.
Add a canvas element to the HTML5 page.
Specify the element id, width, and height:



3: Draw using JavaScript
The canvas element itself has no plotting capability. All the painting work must be completed inside JavaScript:
// Draw a line segment
// Obtain the canvas DOM
Var c = document. getElementById ("myCanvas ");
Console. log (c );
// Set the plotting environment CanvasRenderingContext2D
Var cxt = c. getContext ("2d ");
Console. log (cxt );
// Set the paint width
Cxt. lineWidth = 10;
// Set the paint brush color
Cxt. strokeStyle = "# ff9900 ";
// Set the stroke position
Cxt. moveTo (20, 20 );
// Set the Mobile mode
Cxt. lineTo (100, 20 );
// Draw a line
Cxt. stroke ();


Note: For Path graphics, you must first start the path and draw the end path (Closed Path)
Cxt. beginPath ();
Cxt. closePath ();
Prevents association between multiple images.