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: 12 years ago
Size: 1,699 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 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(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; c.update(); } } </script> </body> </html>