Hello, world!

HTML 5 Canvas Animations HTML

HTML5 canvas-animations describes how build graphics via JavaScript. It allows you to draw graphics such as paths, rectangles, bezier, lines, quadratic, images, and gradients.



HTML5 Canvas - Animations

HTML5 defines the <canvas> element as a simple but powerful method which can be applied for rendering graphics via JavaScript.
It can be also used to draw graphs, make visual images or create animations.

This is a basic <canvas> element which has two particular attributes width and height with other HTML5 attributes such as id, name and class etc.
<canvas id="firstcanvas" width="50" height="50"></canvas>
On this example, you can simply observe that <canvas> element in the DOM by means of getElementById() method:
var canvas  = document.getElementById("firstcanvas");

HTML code example html5 canvas - animations:

Basic example of <canvas> element in HTML5 document:
<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #firstcanvas{border:1px solid blue;}
      </style>
   </head>            
   <body>
      <canvas id="mycanvas" width="50" height="50"></canvas>
   </body>            
</html>

Browser Support

The HTML5 Canvas is supported in ll latest versions of Firefox, Safari, Chrome and Opera except for IE8 does.
Insert the javascript below, so you can use ExplorerCanvas to have canvas support through Internet Explorer.
<!--[if IE]><script src="excanvas.js"></script><![endif]-->

Rendering Context

Primarily the <canvas> is blank, and if you want to show something, first, a script requires accessing the rendering context and draw on it.
The getContext is a DOM technique in canvas element, it allows you to acquire the rendering context and its drawing functions. This function obtains one parameter, the type of context2d.

This is an example of the code to get necessary context, alongside it will verify also if your browser supports <canvas> element:
var canvas  = document.getElementById("mycanvas");
 
if (canvas.getContext){  
   var ctx = canvas.getContext('2d');  
   // drawing code
} else {  
   // canvas-unsupported code
}

HTML5 Canvas Examples

These are examples associated to HTML5 <canvas> element together with their method and description:

Drawing Paths           
1. beginPath() - This method allows you to reset the existing path.
2. moveTo(x, y) - This method allows you to make a new subpath with the given point.
3. closePath() - This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.
4. fill() - This method fills the subpaths with the current fill style.
5. stroke() - This method allows you to stroke the subpaths with the existing stroke style.
6. arc(x, y, radius, startAngle, endAngle, anticlockwise) - This method allows you  to add points to the subpath.

Drawing Rectangles  
1. fillRect(x,y,width,height) - This method allows you to draw a filled rectangle.
2. strokeRect(x,y,width,height) - This method allows you to draw a rectangular outline.
3. clearRect(x,y,width,height) - This method allows you to clear the particular area and makes it fully transparent

Drawing Bezier           
1. beginPath() - This method allows you to reset the existing path.
2. moveTo(x, y) - This method allows you to make a new subpath with the specified point.
3. closePath() - This method allows you to mark the existing subpath as closed, and begins a new subpath with a point similar as the start and end of the recently closed subpath.
4. fill() - This method allows you to fill the subpaths with the existing fill style.
5. stroke() - This method allows you to stroke the subpaths with the existing stroke style.
6. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) - This method allows you to add the specified point to the existing path, joined to the previous one by a cubic Bezier curve with the specified control points.

Drawing Lines            
1. beginPath() - This method allows you to reset the existing path.
2. moveTo(x, y) - This method allows you to create a new subpath with the given point.
3. closePath() - This method allows you to mark the existing subpath as closed, and begins a new subpath with a point similar as the start and end of the recently closed subpath.
4. fill() - This method allows you to fill the subpaths with the existing fill style.
5. stroke() - This method allows you to stroke the subpaths with the existing stroke style.
6. lineTo(x, y) - This method allows you to add the given point to the existing subpath, joined to the previous one by a straight line.

Using Images
1. beginPath() - This method allows you to reset the existing path.
2. moveTo(x, y) - This method allows you to create a new subpath with the given point.
3. closePath() - This method allows you to mark the existing subpath as closed, and begins a new subpath with a point similar as the start and end of the recently closed subpath.
4. fill() - This method allows you to fill the subpaths with the existing fill style.
5. stroke() - This method allows you to stroke the subpaths with the existing stroke style.
6. drawImage(image, dx, dy) - This method allows you to draw the specified image onto the canvas. Here image is a reference to an image or canvas object. x and y create the coordinate on the target canvas where our image should be located.

Drawing Quadratic    
1. beginPath() - This method allows you to reset the existing path.
2. moveTo(x, y) - This method allows you to create a new subpath with the given point.
3. closePath() - This method allows you to mark the existing subpath as closed, and begins a new subpath with a point similar as the start and end of the recently closed subpath.
4. fill() - This method allows you to fill the subpaths with the existing fill style.
5. stroke() - This method allows you to stroke the subpaths with the existing stroke style.
6. quadraticCurveTo(cpx, cpy, x, y)
This method allows you to add the specified point to the existing path, joined to the previous one by a quadratic Bezier curve with the specified control point.

Create Gradients       
1. addColorStop(offset, color) - This method allows you to add a color stop with the specified color to the gradient at the particular offset. Here 0.0 is the offset at one end of the gradient, 1.0 is the offset at the other end.
2. createLinearGradient(x0, y0, x1, y1) - This method allows you to return a CanvasGradient object that defines a linear gradient that paints along the line given by the coordinates defined by the arguments. The four arguments signify the starting point (x1,y1) and end point (x2,y2) of the gradient.
3. createRadialGradient(x0, y0, r0, x1, y1, r1) - This method allows you to return a CanvasGradient object that defines a radial gradient that paints along the cone given by the circles defined by the arguments. The first three arguments signify a circle with coordinates (x1,y1) and radius r1 and the second a circle with coordinates (x2,y2) and radius r2.

Pattern and Shadow
1.createPattern(image, repetition) - This method allows you to use image to build the pattern. The second argument could be a string with one of the following available values: repeat, repeat-x, repeat-y, and no-repeat. If the empty string or null is indicated, repeat will be simulated.

Canvas States
1. save() - This method allows you to push the existing state onto the stack.
2. restore() - This method allows you to pop the top state on the stack, building up the context to that state.

Canvas Translation    
1. translate(x, y) - This method allows you to shift the canvas and its source to another point in the grid.

Canvas Rotation        
1. rotate(angle) - This method allows you to rotate the canvas around the present origin.

Canvas Scaling           
1. scale(x, y) - This method allows you to add or reduce the units in a canvas grid.

Canvas Transform      
1. transform(m11, m12, m21, m22, dx, dy) - This method allows you to modify the transformation matrix to use the matrix specified by the arguments.
2. setTransform(m11, m12, m21, m22, dx, dy) - This method changes the transformation matrix to the matrix given by the arguments .

Canvas Composition
1. globalCompositeOperation - This method allows you to mask off some areas or remove sections from the canvas. This attribute also have an effect on all the drawing procedures.

Canvas Animation     
1. setInterval(callback, time); - This method repeatedly operates the given code after a specified time milliseconds.
2. setTimeout(callback, time); - This method operates the given code only once after a specified time milliseconds.

Styles and Colors       
1. fillStyle - This attribute signifies the color or style to apply within the shapes.
2. strokeStyle - This attribute signifies the color or style to apply for the lines around shapes

Text and Fonts           
1. font [ = value ] - This property allows you to return the existing font settings and can be set, to modify the font.
2. textAlign [ = value ] - This property allows you to return the existing text alignment settings and can be set, to modify the alignment. The available values are start, end, left, right, and center.
3. textBaseline [ = value ] - This property allows you to return the existing baseline alignment settings and can be set, to modify the baseline alignment. The available values are top, hanging, middle , alphabetic, ideographic and bottom
4. fillText(text, x, y [, maxWidth ] ) - This property allows you to fill the particular text at the specified position designated by the given coordinates x and y.
5. strokeText(text, x, y [, maxWidth ] ) - This property allows you to stroke the particular text at the specified position designated by the given coordinates x and y.