Canvas

by LyndseyB

HTML

<canvas id="canvas" width="500" height="300"></canvas>

CSS

canvas {
    border:1px black solid;
    background-color:#f2f2f2;
}

JavaScript

function NumberStop(maxTime) {
    this.maxTime = maxTime;
    this.canvas = document.getElementById('canvas');
    this.ctx = canvas.getContext('2d');
}

NumberStop.prototype.drawNumbers = function(count) {
    
    var ctx = this.ctx; // ctx context
    var c_width = this.canvas.width; // canvas width
    var a_space = c_width-40; // leave space for 20px each side
    var numberCount = count;  // number of circles     

    for(var i=1; i<=numberCount; i++) {
        // draw circles
        drawCircle(i);
    }
    
    function drawCircle(num) {
        var myNum = 6;
        var arcx = 40*num; // x position
        var r = 30; // radius
        var arcy = 50;  // y position       
        
        // draw a circle
        ctx.beginPath();
        ctx.arc(arcx+(r*num),arcy,r,0,2*Math.PI);
        ctx.stroke();
        ctx.closePath();
        //ctx.fill();
        //ctx.fillStyle = "black"; // font color to write the text with
        //var font = "bold " + radius +"px serif";
        //ctx.font = font;
        //ctx.textBaseline = "top
        ctx.fillText(myNum, arcx, arcy);
        //ctx.fillText('Hello', arcx+r ,arcy);
    }
}

var game = new NumberStop(10);
game.drawNumbers(6);