drawing on canvas

by pat spag

HTML

<p>
<!-- start html for assignment 5 -->

Spirograph

<br/>
move the slider to the right to inscrease speed<br/>
move the slider to the left to decrease speed<br/>
all the way to the left to pause/stop drawing<br/>
(over time speed will increase and requires a refresh)<br/>

<button onclick="doDrawing();" onclick="reset();">Start Drawing</button>

 
 <input type="range" id="speed" 
           min="0" max=".08" value=".02" step=".01" />

<br/>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

//based on simle drawing on canvas

var t = 0;
var c = document.getElementById("myCanvas");
var R = c.width * 0.17;
var ctx = c.getContext("2d");

// set to random


function doDrawing() {
    t = 0;
    
    ctx.clear();
    
    var timesRun = 0;
    var color =  '#'+Math.floor(Math.random()*16777215).toString(16);
    
    //starting location
    var x = 300;
    var y = 250;
	// use random number
  
      // Start the Drawing
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.moveTo(x,y);
  
    r = R * Math.floor( Math.random() * 11) / 11 ;
    O = r * 0.6;

    //Use the timer
    var interval = setInterval(function(){
    timesRun += 1;
//long timer to keep going
    if(timesRun === 10000){
        clearInterval(interval); }
        
    drawCircle();}, 20); 
    
}
function drawCircle()
{

//implemented ranger and stop
t += parseFloat(document.getElementById("speed").value);


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

	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) ;
	ctx.stroke();
}

//not working yet need to reset broser if speed is to fast
function reset(){
t=0;
}

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();
    }           
};