Best Way To Clear Screen

mpsn · December 25, 2012

Hi, I'm trying to build a cell culture on a petri dish so I'm just starting off with just drawing 5 micro-organisms. After I generate the cell with Generate nodes button, I want to clear the canvas, currently I'm using naive way of just drawing a white rectange the size of my canvas, I'm guessing this is not efficient to overlap since memory required to store the covered over graphics or does it not matter?

here is my index page:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<!--Note: canvas ALWAYS comes before the script since we need the canvas to draw on -->
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script src="JS_CSS_testBox_1.js" type="text/javascript" ></script>
<p id="prev_x">prev x: </p><!--this was just for debugging-->
<p id="prev_y">prev y: </p><!--this was just for debugging-->
<p id="cur_x">x: </p><!--this was just for debugging-->
<p id="cur_y">y: </p><!--this was just for debugging-->
<button id="gen_nodes" onclick="generate_nodes(id)">Generate nodes</button>
<button id="empty_canvas" onclick="cls()">Clear screen</button>

</body>
</html>

//global variables
prev_x = 0;
prev_y = 0;
cur_x = 0;
cur_y = 0;
prev_x_arr = [0];
prev_y_arr = [0];
i = 0;//current available index in the parallel prev_x_y arr above
item_no = 0;//draw up to 5 nodes

var canvas = document.getElementById('myCanvas');//get the Canvas node
var context = canvas.getContext('2d');//get the context object to work w/ actual drawings (Note: Each canvas element can only have one context)

function pick_a_rand_num()
{
return Math.floor((Math.random()*40) + 1);//Note: JS's rand num fcn is equivalent to: int division of rand()%2 (returns 0 or 1)
}

function generate_nodes(id)
{

while ( id == "gen_nodes" && item_no < 5 )
{
 var rand = pick_a_rand_num();
 var offset_x = pick_a_rand_num()/2;
 var offset_y = pick_a_rand_num()/2;

 cur_x = ( rand )/ 2 + offset_x;//x component of center of circle
 cur_y = ( rand )/ 2 + offset_y;//y component of center of circle
 var radius = 5;
 var startAngle = 0;
 var endAngle = 2 * Math.PI;
 var counterClockwise = false;

 document.getElementById("arr_size").innerHTML = "Size: " + prev_x_arr.length;
 document.getElementById("prev_x").innerHTML = "prev x: " + prev_x;
 document.getElementById("prev_y").innerHTML = "prev y: " + prev_y;
 document.getElementById("cur_x").innerHTML = "x: " + cur_x;
 document.getElementById("cur_y").innerHTML = "y: " + cur_y;

 //go thru parallel arr of prev_x_y to make sure we can draw new circle
 // so compare each point w/ current pt to ensure validity to draw new circle
 var tot_violations = 0;//assume no violation b/c prev_x, prev_y w/ cur_x, cur_y (so if @ least 1 violation, we don't draw the new circle!)
 for ( var j = 0; j < prev_x_arr.length; ++j )//if we find at least 1 pt that conflicts w/ cur_x, cur_y, don't draw, so need to go thru entire prev_arr
 {
	 if ( Math.abs(cur_x - prev_x_arr[j] ) <= 2*radius && Math.abs(cur_y - prev_y_arr[j] ) <= 2*radius )//ensure no two circles overlap (so don't draw circles that overlap)'
	 {
		 tot_violations++;
	 }
 }

 //after going thru entire prev_x, prev_y arr above, only draw when NO violations
 //ONLY update prev_x, prev_y if we have an acceptable center of new circle
 if ( tot_violations == 0 )//ensure no two circles overlap (so don't draw circles that overlap)'
 {
	 context.beginPath();//Q: why do we need this?
	 context.arc(cur_x, cur_y, radius, startAngle, endAngle, counterClockwise);

	 context.lineWidth = 2;

		 // line color
	 context.fillStyle = 'blue';
	 context.fill();
	 context.strokeStyle = 'black';
	 context.stroke();
	 item_no++;

	 prev_x = cur_x;
	 prev_y = cur_y;

	 //Note: these prev_x, prev_y arr below store ALL the x,y coordinates so far
	 prev_x_arr[i] = cur_x;
	 prev_y_arr[i] = cur_y;
	 ++i;
 }
}//END WHILE (draw 5 nodes only)
}

//[CL]ear [s]creen (paying homage to Windows Command Prompt command)
//Problem here: how do I delete all the current drawings??? one way is draw a white rectange to overlap...what's better way??? (need to figure out)
function cls()
{
 prev_x = 0;
 prev_y = 0;
 cur_x = 0;
 cur_y = 0;
 prev_x_arr = [0];
 prev_y_arr = [0];
 i = 0;//current available index in the parallel prev_x_y arr above
 item_no = 0;//draw up to 5 nodes

 /*Naive way to clear screen, I'm just drawing a white rectange with same size as my canvas, what's more efficient way?*/
 context.beginPath();//I guess always call beginPath for clarity, what other reason?
 context.rect(0,0,200,200);
 context.fillStyle = "white";
 context.fill();
}

Edited December 25, 2012 by mpsn

kicken · December 25, 2012

clearRect()

Sign In

Best Way To Clear Screen

Recommended Posts

mpsn

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information