Canvas Clock
Create the Canvas The clock needs an HTML container. Create an HTML canvas: The HTML5 < canvas > tag is used to draw graphics, on the fly, via scripting (usually JavaScript). However, the < canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics. The getContext() method returns an object that provides methods and properties for drawing on the canvas. This reference will cover the properties and methods of the getContext("2d") object, which can be used to draw text, lines, boxes, circles, and more - on the canvas. <!DOCTYPE html> <html> <body> <canvas id="canvas" width="400" height="400" style="background-color:#333"> </canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); ...
