This page is describing the attributes assigned only to graphic group of HTML5 elements.

Attributes and related elements:

width and height attributes:

<canvas>

getContext("2d"), fillStyle, fillRect(x,y,x+,y+) and stroke() methods:

<canvas> (drawings)

moveTo(x,y), lineTo(x,y) and stroke() methods:

<canvas> (coordinates)

beginPath(), moveTo(x, y), closePath(), fill(), arc(x, y, radius, startAngle, endAngle, anticlockwise), quadraticCurveTo(), bezierCurveTo() and stroke() methods:

<canvas> (paths)

font, fillText(text,x,y), fillStyle, strokeText(text,x,y), and strokeStyle methods:

<canvas> (texts)

createLinearGradient(x0, y0, x1, y1), createRadialGradient(x0, y0, r0, x1, y1, r1) and addColorStop(<position>, <color>) methods:

<canvas> (gradients)

beginX, beginY, beginRadius, endX, endY and endRadius properties:

<canvas> (gradients)

drawImage(image, dx, dy), drawImage(image, dx, dy, dw, dh) and drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) methods:

<canvas> (images)

Attribute, methods and properties characteristics and purpose:

Attributes (<canvas>):

width; defines width of the canvas element in pixels

height; defines height of the canvas element in pixels

Methods (<canvas> drawings):

getContext("2d") - built-in method that defines the context in which the canvas will be drawn (i.e. "2d")

fillStyle - defines the fill color of the element

fillRect(x,y,x+,y+) - draws a rectangle defined with the starting point (x,y) and sized with x+ and y+

stroke() - strokes the sub paths with the current stroke style

Methods (<canvas> coordinates):

moveTo(x,y) - defines the starting point of the line

lineTo(x,y) - defines the ending point of the line

stroke() - strokes the sub paths with the current stroke style

Methods (<canvas> paths):

beginPath() - resets the current path

moveTo(x, y) - creates a new sub path with the given point

closePath() - marks the current sub path as closed while starting a new sub path with a point the same as the start and end of the newly closed sub path

fill() - fills the sub paths with the current fill style

fillStyle - defines the fill color of the element

arc(x, y, radius, startAngle, endAngle, anticlockwise) - defines points of the path that creates a radial element; the arc described by the circumference of the circle defined by the arguments (starting and ending at given angles); the argument anticlockwise defines the direction of drawing

quadraticCurveTo() - adds a point to the current path by applying a quadratic Bézier curve

bezierCurveTo() - adds a point to the current path by applying a cubic Bézier curve

stroke() - strokes the sub paths with the current stroke style

Methods (<canvas> text):

font - explains the font property that will be used

fillText(text,x,y) - fills the given text at the given position indicated by the given coordinates x and y

fillStyle - CSS based color for text that call fillText method

strokeText(text,x,y) - strokes the given textat the given position indicated by the coordinates as x and y

strokeStyle - CSS based color for text written by strokeText method - textBaseline - explains the baseline alignment to be set for the text; possible values are top, hanging, middle , alphabetic, ideographic and bottom

Methods (<canvas> gradients):

  1. createLinearGradient(x0, y0, x1, y1) - this method creates a linear gradient
  2. createRadialGradient(x0, y0, r0, x1, y1, r1) - this method creates a radial gradient
  3. addColorStop(<position>, <color>) - this method indicates a color to be added to existing gradient; we are allowed to add as many colors as we want, and you can also specify where along the gradient pattern the color will appear

Methods (<canvas> images):

drawImage(image, dx, dy) - the method takes an image and draws it on the canvas; dx and dy are coordinates describing where to start drawing and image at, with (0,0) being the upper-left corner

drawImage(image, dx, dy, dw, dh) - the method takes an image, scales it to a width of dw and a height of dh, and draws it on the canvas at coordinates (dx, dy)

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) - the method takes an image, clips it to the rectangle defined with (sx, sy, sw, sh), scales it to dimensions (dw, dh), and draws it on the canvas at coordinates (dx, dy)

Properties (<canvas> radial gradients):

beginX - the X position of the starting point which is often in the center of your shape

beginY - along with beginX, this determines the beginning position of your gradient

beginRadius - radius of the center circle; usually is zero, but may be made larger to emphasize the center color

endX - describes the X position of the ending circle and is typically same as beginX

endY - along with endX it defines the position of the ending circle; if the beginning and ending circles have the same positions, we get a circular gradient; change the end position will make the gradient stretch in a particular direction

endRadius - ending radius defines where the last color gradient will be placed; smaller values lead to a tightly grouped gradient, while larger ones spread the gradient along a larger area

Examples:

Canvas basic drawings, lines and coordinates example:

Canvas simple path methods example:

Canvas text methods example:

Canvas cool linear and radial gradients methods:

Canvas images manipulation methods example:

Basic SVG element gradient effect example:

 

›› go to examples ››