How to disable cache for images in all browsers

This tag was recommended by some developers but it may not work if you have dynamic file uploaded to your server. <img src=”my-image.jpg?cache=1″> The best tag you can add to display a brand new image is to use the function time() in php to generate different time for each time a photo was uploaded to your server. <img src=”my-image.jpg?cache=<?=time()?>”>

Continue reading »

HTML5 Canvas Cheatsheet

HTML5 Canvas Element Html5 canvas element <canvas id=”myCanvas” width=”500″ height=”300″> Html5 canvas element with fallback content <canvas id=”myCanvas” width=”500″ height=”300″> your browser doesn’t support canvas! </canvas> 2d context var context = canvas.getContext(‘2d’); Webgl context (3d) var context = canvas.getContext(‘webgl’); Shapes Draw rectangle context.rect(x, y, width, height); context.fill(); context.stroke(); Fill rectangle shorthand context.fillRect(x, y, width, height); Stroke rectangle shorthand context.strokeRect(x, y, width, height); Draw circle context.arc(x, y, radius, 0, Math.PI * 2); context.fill(); context.stroke(); Styles Fill context.fillStyle = ‘red’; context.fill(); Stroke context.strokeStyle = ‘red’; context.stroke(); Linear…

Continue reading »

Keyboard code “KeyCode” and how to use it in JavaScript

To work on HTML5 canvas to develop a tool similar to paint or free draw on an image, JQuery and Javascript are often used on the browser client side to perform simple tasks that would otherwise require a full postback to the server. There’re a set of keycode associated with each character on the keyboard. To use this on your canvas on an html page, add JQuery and JavaScript to detect the key that user pressed as follow: Key Code backspace 8 tab 9 enter…

Continue reading »