DEMO of marching ants effect or moving border

  
<canvas id="my_canvas" width="400" height="200"  style="border:2px solid #000000;"></canvas>

<div id='offset_text'></div>
<div id="slider_offset"></div>
<div id='line_text'></div>
<div id="slider_line"></div>
<div id='gap_text'></div>
<div id="slider_gap"></div>
<div id='speed_text'></div>
<div id="slider_speed"></div>
<br><div class='radio-inline'>
  <label><input type='radio' name='direction' id='r1' value='forward' checked>Forward</label>
</div>

<div class='radio-inline'>
  <label><input type='radio' name='direction' id='r2' value='reverse' >Reverse</label>
</div>

var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var direction='forward';
var o_speed=50;
var x=100;
var y=100;
var offset=3;
var line=5;
var gap=5;
my_function=function my_function(){
	gctx.clearRect(0, 0, my_canvas.width,my_canvas.height);
gctx.beginPath();

gctx.setLineDash([line,gap]);
gctx.lineDashOffset = offset;
gctx.strokeRect(20, 20, 330, 150);
gctx.stroke();
$( "#speed_text" ).html("speed = " +  o_speed );
$( "#line_text" ).html("line length = " + line );
$( "#gap_text" ).html("line gap = " +  gap );

}
//////////////////


my_march=function my_march(){
if(direction=='forward'){	
 offset--;
  if (offset <1) {
    offset = 10;
  } 
}else{
offset++;
  if (offset >10) {
    offset = 0;
  }
 

}	
  my_function();
  setTimeout(my_march, o_speed);
}

///////////////////////////

$( "#slider_speed" ).slider({
orientation:'horizontal',
min:0,
max:100,
step:1,
animate:'slow',
value:o_speed,
disabled:false,
slide: function(event, ui) { 
o_speed=ui.value;
my_function()
} 
});

///////////////////////////////
///////////////////////////
$( "#slider_line" ).slider({
orientation:'horizontal',
min:0,
max:400,
step:1,
animate:'slow',
value:line,
disabled:false,
slide: function(event, ui) { 
line=ui.value;
my_function()
} 
});
///////////////////////////////
///////////////////////////
$( "#slider_gap" ).slider({
orientation:'horizontal',
min:0,
max:400,
step:1,
animate:'slow',
value:gap,
disabled:false,
slide: function(event, ui) { 
gap=ui.value;
my_function()
} 
});
///////////////////////////////
$("input:radio[name=direction]").click(function() {
  direction=$(this).val();
})
///////////
my_function()
my_march();