File: example.html

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


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>
<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 type="text/javascript" src="./canvicon.packed.js" ></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 5;
var c = new canvicon("canvas");
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(last.x >= 0 && last.y >= 0)
			ctx.moveTo(last.x, last.y);
			ctx.lineTo(e.clientX-10, e.clientY-10);
		last.x = e.clientX-10;
		last.y = e.clientY-10;