Записи

 <table width="500" height="500" border="1"
 align="center" class="colorborder">
<tr>
<td colspan="2" width="500" height="300"
 style="cursor:pointer"><canvas id="v11myCanvas1" width="500"
 height="300"></canvas></td>
</tr>
<tr>
<td style="vertical-align: center;"><input id="idSort1"
 name="33" type="radio" checked="checked" />больше
</td>
<td style="vertical-align: center;"><input id="idSort2"
 name="33" type="radio" />меньше
</td>
</tr>
<tr>
<td style="vertical-align: center;">
<input readonly="readonly" style="width: 100px; height: 20px; cursor:pointer;
 border: 1px solid blue;" onclick="fRand()" value="новые данные">
</td>
<td style="vertical-align: center;">
<input readonly="readonly" style="width: 100px; height: 20px; cursor:pointer;
 border: 1px solid blue;" onclick="fSort()" value="сортировка">
</td>
</tr>
</table>


<script>
 var v11canvas1 = document.querySelector("#v11myCanvas1");
 var v11context1 = v11canvas1.getContext("2d");
 var arr = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
 var tempI = 100;
 
 function v11getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min)) + min;
 }
 function fRand() {
 for (var i = 0; i < 95; i++) { arr[i] = v11getRandomInt(5, 300); }
 }
 fRand();
 
 function v11update() {
 v11context1.clearRect(0, 0, v11canvas1.width, v11canvas1.height);
 v11context1.beginPath();
 for (var i = 0; i < 95; i += 1) {
 v11context1.moveTo(0, 1+3*i);
 v11context1.lineTo(arr[i], 1+3*i);
 v11context1.strokeStyle = "#0000FF";
 v11context1.stroke();
 }
 requestAnimationFrame(v11update);
 }
 v11update();

function fSort1(tI) {
 for (var j = 0; j < 95; j++) {
 if (arr[tI] > arr[j]) {
 var tempV = arr[tI];
 arr[tI] = arr[j];
 arr[j] = tempV;
 }}
}
function fSort2(tI) {
 for (var j = 0; j < 95; j++) {
 if (arr[tI] < arr[j]) {
 var tempV = arr[tI];
 arr[tI] = arr[j];
 arr[j] = tempV;
 }}
}
function fSort() {
tempI = -1;
}
var v11timer = setInterval(fSortAnim, 10);

function fSortAnim() {
if (tempI < 100) {
tempI = tempI + 1;
if (tempI > 94) {tempI = 100};
}
if (tempI < 100) {
if (document.getElementById('idSort1').checked) { fSort1(tempI); }else{ fSort2(tempI); }
}
}
</script>