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: 12 years ago
Size: 1,556 bytes


Class file image Download
<!-- /************************************************************* * This script is developed by Arturs Sosins aka ar2rsawseen, * 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: * **************************************************************/ --> <!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>