Simple Drawing on Canvas - With Timer

by Shawn Lackey

HTML

<button onclick="doDrawing();">Start Drawing</button>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

var t = 0;
var c = document.getElementById("myCanvas");
var R = 50;
var ctx = c.getContext("2d");
var r = 45;
var O = 5;
var x = (c.width / 2) + (R + r) * Math.cos(t) - (r + O) * Math.cos(((R + r) / r) * t);
var y = (c.width / 2) + (R + r) * Math.sin(t) - (r + O) * Math.sin(((R + r) / r) * t);

function doDrawing() {
    t = 0;

    // Clear the Canvas
    ctx.clear();

    // Create a random color
    var timesRun = 0;
    var color = '#' + Math.floor(Math.random() * 16777215).toString(16);


    // Start the Drawing
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.moveTo(x, y);

    //Use the timer to create drawing
    var interval = setInterval(function () {
        timesRun += 1;
        if (timesRun === 200) {
            clearInterval(interval);
        }

        drawCircle();
    }, 5);

}

function drawCircle() {
    t += 0.8;

    x = (c.width / 2) + Math.floor((R + r) * Math.cos(t) - (r + O) * Math.cos(((R + r) / r) * t));
    y = (c.width / 2) + Math.floor((R + R) * Math.sin(t) - (r + O) * Math.sin(((R + r) / r) * t));


    ctx.lineTo(x, y) * (c.width / 2);
    ctx.stroke();
}

CanvasRenderingContext2D.prototype.clear = CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
        this.save();
        this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
        this.restore();
    }
};