A Flashing Ring

This JavaScript program demonstrates how to draw a flashing ring on a canvas element.

FlashingRing.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's Javascript</title>
    <script type="text/javascript" src="FlashingRing.js"></script>
  </head>
  <body onload="Initialize()">
    <canvas id="idCanvas" width="640" height ="480" style="background-color: #F0F0F0;"></canvas>
  </body>
</html>

FlashingRing.js

var gbOn = true;
var qContext2D = null;

function AnimationLoop() {
  if (gbOn) {
    Draw("gray");
  } else {
    Draw("white");
  }
  gbOn = !gbOn;
  setTimeout(AnimationLoop, 500);
}

function Initialize() {
	var qCanvas = document.getElementById("idCanvas");
	qContext2D = qCanvas.getContext("2d");
	AnimationLoop();
}

function Draw(sColor) {
	qContext2D.lineWidth = 10;
	qContext2D.clearRect(0, 0, 640, 480);
	var dCx = 320.0;
	var dCy = 240.0;
	var dRadius = 100.0;
	var dArcStart = 0.0;
	var dArcEnd =  2.0*Math.PI;
	var bCounterClockwise = true;
	qContext2D.strokeStyle = sColor;
	qContext2D.beginPath();
	qContext2D.arc(dCx, dCy, dRadius, dArcStart, dArcEnd, bCounterClockwise);
	qContext2D.stroke();
}

Canvas JavaScript

A Flashing Ring

FlashingRing.html

FlashingRing.js

Output