Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Animated favicon using canvas

Canvicon class provides a way to animate your website's favicon using canvas. You can dynamically draw on canvas and update your favicon. It should work in all modern browsers except IE.

Package contains canvicon.js, canvicon.packed.js (packed javascript), canvicon.jquery.js (jquery plugin), and three example files: simple_example.html, example.html, and jquery_example.html to demonstrate class functionality.

Contents

Download

Example codes

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id='canvas' width='50px' height='50px' style='display: none;'></canvas>
<script type="text/javascript" src="./canvicon.packed.js" ></script>
<script type="text/javascript">
//get canvas and draw something
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(0,0,50,50);

//create canvas instance
var c = new canvicon("canvas");
//update favicon
c.update();
</script>
</body>
</html>

Live Examples

Canvas is hidden in this page. By pushing 'Draw random squares' random squares will be drawn on hidden canvas and rendered as favicon

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew canvicon(id, config);
DescriptionCreate canvicon instance
Input parameters

string or HTML element id - id of canvas element or canvas HTML element itself

json config - Json structure with configuration properties

  • function onerror - callback function on error, when canvas isn't available, it doesn't detect IE problem (default: null)
Example input
var c = new canvicon("mycanvas", 
{
	onerror: function(){alert("Favicon will not be animated");}
});

Update favion

Back to method list

Method nameupdate()
DescriptionUpdate favicon to current canvas state

Jquery usage

Back to method list

Method namecanvicon(config)
DescriptionCanvicon jquery plugin usage
Input parameters

json config - Json structure with configuration properties

  • function onerror - callback function on error, when canvas isn't available, it doesn't detect IE problem (default: null)
>
Example

$("mycanvas").canvicon()

Latest changes

None for now

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus