Each item on the canvas is represented by a rectangle. When clicking inside the bounds of an rectangle the inner circle’s colour changes to grey to indicate the item is selected. Release the button results in a mouse up event . Between the mouse down and up events the item can be dragged and thus moved around the canvas. When two objects collide they will be coloured red. This functionality has been implemented as follows. Continue reading “Canvas Drag and Drop with Collision Detection”
Continue reading “3 Step CSS Animation Tutorial”
HTML5’s canvas implementation allows you to draw whatever takes you fancy; be it a thermometer, speedometer, map, compass or a Caesar cipher. In this post one intends to draw a digital clock. This HTML5 canvas implementation draws the hour, minute and second digits individually with the correct number that represents the current time. These are then redrawn every second as one would expected a real clock would do!
Continue reading “HTML 5 Canvas: An animated Digital Clock”
HTML5’s canvas implementation allows you to draw whatever takes you fancy; be it a thermometer, speedometer, map, compass or a Caesar cipher. In this posts I’ve taken the engine used to draw the Caesar cipher and applied it to a traditional analogue clock. This HTML5 canvas implementation draws the clock face – minus the hands – as the background. The hour, minute and second hands are then drawn at the angle that represents the current time. These are then redrawn every second to animate the clock arms as one would expected a real analogue clock to do!
Continue reading “HTML 5 Canvas: An animated Analogue Clock”
HTML5’s canvas implementation allows you to draw whatever takes you fancy; be it a thermometer, speedometer, map or compass. This post takes my previous posts one step further and mixes together the techniques used in the aforementioned posts to draw an interactive animated Caesar cipher. In cryptography, a Caesar cipher is one of the simplest and most widely known encryption techniques. It is a substitution cipher in which letters are replaced by a letter some fixed number of positions down the alphabet. For example, with a shift of 4, A would be replaced by E, B would become F, and so on. The method is named after Julius Caesar, who used it in his private correspondence. In this post one will explain how to draw a Caesar Cipher gauge. The gauge will allow a user to input the desired shift. When a shift value is input the Caesar Cipher dial will rotate to represent the new shift.
. Continue reading “HTML 5 Canvas: An animated Caesar Cipher”
My previous posts on HTML5’s canvas implementation have simply drawn a static image; be it a thermometer, speedometer or a map. This post blends together the various methods covered in the aforementioned posts to draw an animated compass. This is achieved by adding two elements to the canvas. These are the background image (a compass without its needle) and the compass needle which is continuously animated in a circular motion. Continue reading “HTML 5 Canvas: An animated compass”