Icontem

File: simple.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Canvicon  >  simple.html  >  Download  
File: simple.html
Role: Example script
Content type: text/plain
Description: Simple example
Class: Canvicon
Set the current page favicon to a canvas image
Author: By
Last change:
Date: 7 years ago
Size: 1,556 bytes
 

Contents

Class file image Download
<!--
/*************************************************************
 * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
 * Feel free to distribute and modify code, but keep reference to its creator
 *
 * Canvicon class provides a way to rendeer canvas as website's favicon.
 * You can draw on canvas and update favicon, thus creating an animated favicon
 *
 * For more information, examples and online documentation visit: 
 * http://webcodingeasy.com/JS-classes/Animated-favicon-using-canvas
**************************************************************/
-->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Canvas is hidden in this page. By pushing "Draw random squares" random squares will be drawn on hidden canvas and rendered as favicon</p>
<canvas id='canvas' width='50px' height='50px' style='display: none;'></canvas>
<input type='button' value='Draw random squares' onclick='random_circle()'/>
<script type="text/javascript" src="./canvicon.packed.js" ></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var c = new canvicon("canvas");
function random_circle(){
	var size = getRandomInt(5, 10);
	var half = Math.round(size/2);
	ctx.fillRect(getRandomInt(half, canvas.width - half), getRandomInt(half, canvas.width - half), size, size);
	c.update();
}
//get random integer
var getRandomInt = function(min, max){
	return Math.floor(Math.random() * (max - min + 1)) + min;
};
</script>
</body>
</html>