The <Canvas> element is the most important element introduced by HTML5. It creates a 2d Canvas API (Application Programming Interface) using JavaScript.
The <canvas> element is only a container for graphics which is used to draw graphics, on the fly, via scripting. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
The default size of the canvas is 300 x 150(width * length) but you can also define custom size and other attributes for the canvas element.
Syntax for creating a <canvas> element
<canvas id=”Unique_id” width=”X px” height=”Y px”> </canvas>
The <Canvas> element create only an empty canvas (or a container), the graphics part will be made by the JavaScript. To create a canvas markup you need three attributes id, width, and height. Let us describe you the attributes in brief:
id: This Attribute allots a unique id to the canvas element using this id JavaScript will make graphics.
width and height: This Attribute defines the dimensions of the canvas.
A simple Example of <canvas> element
Here in this example the canvas is initially blank, borderless and transparent. You can use CSS background-color and border property to define background and border respectively.
Code
Fig1
Output
Fig2
Let us talk about different Canvas API lists for attributes and functions.
Styling
To apply styling use two attributes in a Canvas:
. attribute any fillStyle; // (default black)
. attribute any strokeStyle; // (default black)
Setting Line Styles
A user can set the line styles to the Canvas element which will use different JavaScript attributes:
. attribute DOMString lineCap; // “butt”, “round”, “square” (default “butt”)
. attribute DOMString lineJoin; // “miter”, “round”, “bevel”* (default “miter”)
. attribute float lineWidth; // (default 1)
. attribute float miterLimit; // (default 10)
Casting Shadows
The Canvas element gives you add shadows function to your graphics with different attributes:
. attribute float shadowBlur; // (default 0)
. attribute DOMString shadowColor; // (default transparent black)
. attribute float shadowOffsetX; // (default 0)
. attribute float shadowOffsetY; // (default 0)
Drawing Rectangles
This function is used to draw a rectangle:
. clearRect(float x, float y, float w, float h);
. fillRect(float x, float y, float w, float h);
. strokeRect(float x, float y, float w, float h);
Drawing Complex Shapes
Here you will get to know how you can draw different complex shapes like arcs, Bezier curves, and more using these functions with canvas element:
. arc(float x, float y, float radius, float startAngle, float endAngle, Boolean anticlockwise);
. arcTo(float x1, float y1, float x2, float y2, float radius);
. beginPath();
. bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y);
. clip();
. closePath();
. fill();
. lineTo(float x, float y);
. moveTo(float x, float y);
. quadraticCurveTo(float cpx, float cpy, float x, float y);
. rect(float x, float y, float w, float h);
. stroke();
. boolean isPointInPath(float x, float y);
Drawing Some Text
A user can also write text in a Canvas using different attributes and functions:
. attribute DOMString font; // (default 10px sans-serif)
. attribute DOMString textAlign; // “start”, “end”, “left”, “right”, “center” (default: “start”)
. attribute DOMString textBaseline; // “top”, “hanging”, “middle”, “alphabetic”, “ideographic”, “bottom” (default: “alphabetic”)
. fillText(DOMString text, float x, float y, optional float maxWidth);
. TextMetrics measureText(DOMString text);
. strokeText(DOMString text, float x, float y, optional float maxWidth);
Drawing Images
A user can even draw images with these functions:
. drawImage(HTMLImageElement image, float dx, float dy, optional float dw, float dh);
. drawImage(HTMLImageElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh);
. drawImage(HTMLCanvasElement image, float dx, float dy, optional float dw, float dh);
. drawImage(HTMLCanvasElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh);
. drawImage(HTMLVideoElement image, float dx, float dy, optional float dw, float dh);
. drawImage(HTMLVideoElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh);
Using Transformations
A user can also rotate, resize (scale), or move (translate) graphics with these functions:
. rotate(float angle);
. scale(float x, float y);
. translate(float x, float y);