Icontem

File: jquery_example.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Canvicon  >  jquery_example.html  >  Download  
File: jquery_example.html
Role: Example script
Content type: text/plain
Description: Jquery example
Class: Canvicon
Set the current page favicon to a canvas image
Author: By
Last change:
Date: 8 years ago
Size: 1,768 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 style='padding-left: 420px;'>You can draw by clicking and moving mouse on this canvas and it will render as favicon of this website.</p>
<canvas id='canvas' width='400px' height='400px' style='border: 1px solid black; position: absolute; top: 10px; left: 10px;'></canvas>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="./canvicon.jquery.js" ></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 5;
var draw = false;
var last = new Object();
last.x = -1;
last.y = -1;
canvas.onmousedown = function(){
	draw = true;
};

canvas.onmouseup = function(){
	draw =  false;
	last.x = -1;
	last.y = -1;
};

canvas.onmousemove = function(e){
	if(draw)
	{
		if(last.x >= 0 && last.y >= 0)
		{
			ctx.beginPath();
			ctx.moveTo(last.x, last.y);
			ctx.lineTo(e.clientX-10, e.clientY-10);
			ctx.stroke();
		}
		last.x = e.clientX-10;
		last.y = e.clientY-10;
		$("#canvas").canvicon();
	}
}
</script>
</body>
</html>