Vishu D'cruz Vishu D'cruz - 1 month ago 12
HTML Question

All set But my Moving rainbow canvas not working

There is a one canvas and four buttons.
Four buttons like Circle,Rectangle,Square and Animated rainbow.
When you click on cicle button in canvas circle show.and when you click on rectangle button then rectangle canvas show on canvas.

I done my code for moving rainbow on JSfiddle .
But when i run that code on my local sublime. code not work.

can anyone help me to solve this problem.
Here is my code:



function circle()
{

create();
var c = document.getElementById("main_canvas");
var ctx = c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.strokeStyle="#FF0000";
ctx.beginPath();
ctx.arc(500, 235, 90, 0, 2 * Math.PI);
ctx.stroke();

}
function rectangle()
{
create();
var c = document.getElementById("main_canvas");
var ctx = c.getContext("2d");
ctx.rect(300, 180, 250, 100);
ctx.fillStyle="cyan";
ctx.strokeStyle="#FF0000";
ctx.stroke();
}
function square()
{
create();
var c = document.getElementById("main_canvas");
var ctx = c.getContext("2d");
ctx.rect(370, 180, 250, 250);
ctx.fillStyle="cyan";
ctx.strokeStyle="#FF0000";
ctx.stroke();
}

function rainbow() {

create();
var bar = new ProgressBar.SemiCircle(container, {
strokeWidth: 4.5,
easing: 'linear',
duration: 1700,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
});
var bar1 = new ProgressBar.SemiCircle(container1, {
strokeWidth: 4,
easing: 'linear',
duration: 2200,
color: 'black',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
});
var bar2 = new ProgressBar.SemiCircle(container2, {
strokeWidth: 4,
easing: 'linear',
duration: 2200,
color: 'red',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
});
var bar3 = new ProgressBar.SemiCircle(container3, {
strokeWidth: 4,
easing: 'linear',
duration: 2200,
color: 'cyan',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
});
var bar4 = new ProgressBar.SemiCircle(container4, {
strokeWidth: 4,
easing: 'linear',
duration: 2200,
color: 'yellow',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
});
var bar5 = new ProgressBar.SemiCircle(container5, {
strokeWidth: 4,
easing: 'linear',
duration: 2200,
color: 'red',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
});
var bar6 = new ProgressBar.SemiCircle(container6, {
strokeWidth: 4,
easing: 'linear',
duration: 2200,
color: 'blue',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
});

bar.animate(1.0);
bar1.animate(1.0);
bar2.animate(1.0);
bar3.animate(1.0);
bar4.animate(1.0);
bar5.animate(1.0);
bar6.animate(1.0);
// Number from 0.0 to 1.0

}

function remove() {
var el = document.getElementById('cvc');
var element = document.getElementById('main_canvas');
el.removeChild(element);
}

function create() {
remove('main_canvas');
var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'main_canvas');
canvas.setAttribute('width', '1000');
canvas.setAttribute('height', '500');
var el = document.getElementById('cvc');
el.appendChild(canvas);
}

#main_canvas
{
border: 1px solid #000;

}
.canvas_button
{
width: 80px;
color: #fff;
height: 39px;
background-color: #000;
border: 1px solid #fff;
}
.circle_button
{
font-size: 25px;
position: relative;
bottom: 464px;
right: 134px;
float: right;
width: 147px;
height: 47px;
}
.rectangle_button
{
font-size: 25px;
position: relative;
bottom: 406px;
left: 14px;
float: right;
width: 147px;
height: 47px;

}
.square_button
{
font-size: 25px;
position: relative;
bottom: 349px;
left: 161px;
float: right;
width: 147px;
height: 47px;
}
.animated_button
{
font-size: 25px;
position: relative;
bottom: 289px;
left: 308px;
float: right;
width: 146px;
height: 62px;
}
#container {
margin: 40px;
width: 360px;
height: 80px;
}
#container1 {
position:relative;
bottom:104px;
left:15px;
margin: 40px;
width: 328px;
height: 100px;
}
#container2 {
position:relative;
top:126px;
right:15px;
margin: 40px;
width: 388px;
height: 100px;
}
#container3 {
position:relative;
top:250px;
right:32px;
margin: 40px;
width: 422px;
height: 100px;
}
#container4 {
position:relative;
top:372px;
right:48px;
margin: 40px;
width: 457px;
height: 100px;
}
#container5 {
position:relative;
bottom:232px;
left:29px;
margin: 40px;
width: 300px;
height: 100px;
}

<!DOCTYPE html>
<html>
<head>
<title>JS_module_Canvas</title>
<link rel="stylesheet" type="text/css" href="js_module_vishal.css"/>
<script src="js_module_vishal.js"></script>
</head>
<body>
<p id="cvc">
<canvas id="main_canvas" width="1000" height="500">

</canvas>
</p>
<div>
<button type="button" id="cir" class="circle_button canvas_button" onclick="circle()">Circle</button>
</div>
<div>
<button type="button" id="rec" class="rectangle_button canvas_button" onclick="rectangle()">Rectangle</button>
</div>
<div>
<button type="button" id="sqr" class="square_button canvas_button" onclick="square()">Square</button>
</div>
<div>
<button type="button" class="animated_button canvas_button" onclick="rainbow()">Animated Rainbow


</button>
<div id="container4"></div>
<div id="container3"></div>
<div id="container2"></div>
<div id="container"></div>
<div id="container1"></div>
<div id="container5"></div>
<div id="container6"></div>
</div>
https://stackoverflow.com/questions/ask#
</body>
</html>




Answer Source

The script throws an undefined error because you didn't include progressbar.js in your script.

function circle()
{

	create();
	var c = document.getElementById("main_canvas");
	var ctx = c.getContext("2d");
	ctx.fillStyle="#FF0000";
	ctx.strokeStyle="#FF0000";
	ctx.beginPath();
	ctx.arc(500, 235, 90, 0, 2 * Math.PI);
	ctx.stroke();

}
function rectangle()
{
	create();
	var c = document.getElementById("main_canvas");
	var ctx = c.getContext("2d");
	ctx.rect(300, 180, 250, 100);
	ctx.fillStyle="cyan";
	ctx.strokeStyle="#FF0000";
	ctx.stroke();
}
function square()
{
	create();
	var c = document.getElementById("main_canvas");
	var ctx = c.getContext("2d");
	ctx.rect(370, 180, 250, 250);
	ctx.fillStyle="cyan";
	ctx.strokeStyle="#FF0000";
	ctx.stroke();
}

function rainbow() {
	
	create();
	var bar = new ProgressBar.SemiCircle(container, {
	  strokeWidth: 4.5,
	  easing: 'linear',
	  duration: 1700,
	  color: '#FFEA82',
	  trailColor: '#eee',
	  trailWidth: 1,
	  svgStyle: null
	});
	var bar1 = new ProgressBar.SemiCircle(container1, {
	  strokeWidth: 4,
	  easing: 'linear',
	  duration: 2200,
	  color: 'black',
	  trailColor: '#eee',
	  trailWidth: 1,
	  svgStyle: null
	});
	var bar2 = new ProgressBar.SemiCircle(container2, {
	  strokeWidth: 4,
	  easing: 'linear',
	  duration: 2200,
	  color: 'red',
	  trailColor: '#eee',
	  trailWidth: 1,
	  svgStyle: null
	});
	var bar3 = new ProgressBar.SemiCircle(container3, {
	  strokeWidth: 4,
	  easing: 'linear',
	  duration: 2200,
	  color: 'cyan',
	  trailColor: '#eee',
	  trailWidth: 1,
	  svgStyle: null
	});
	var bar4 = new ProgressBar.SemiCircle(container4, {
	  strokeWidth: 4,
	  easing: 'linear',
	  duration: 2200,
	  color: 'yellow',
	  trailColor: '#eee',
	  trailWidth: 1,
	  svgStyle: null
	});
	var bar5 = new ProgressBar.SemiCircle(container5, {
	  strokeWidth: 4,
	  easing: 'linear',
	  duration: 2200,
	  color: 'red',
	  trailColor: '#eee',
	  trailWidth: 1,
	  svgStyle: null
	});
	var bar6 = new ProgressBar.SemiCircle(container6, {
	  strokeWidth: 4,
	  easing: 'linear',
	  duration: 2200,
	  color: 'blue',
	  trailColor: '#eee',
	  trailWidth: 1,
	  svgStyle: null
	});

	bar.animate(1.0);
	bar1.animate(1.0);
	bar2.animate(1.0);
	bar3.animate(1.0);
	bar4.animate(1.0);
	bar5.animate(1.0);
	bar6.animate(1.0);
	// Number from 0.0 to 1.0

	}

	function remove() {
	  var el = document.getElementById('cvc');
	  var element = document.getElementById('main_canvas'); 
	  el.removeChild(element);
	}

	function create() {
		remove('main_canvas');
	    var canvas = document.createElement('canvas');
	    canvas.setAttribute('id', 'main_canvas');
	    canvas.setAttribute('width', '1000');
	    canvas.setAttribute('height', '500');
	    var el = document.getElementById('cvc');
	    el.appendChild(canvas);
	}
#main_canvas
{
	border: 1px solid #000;
	
}
.canvas_button
{
	width: 80px;
	color: #fff;
	height: 39px;
	background-color: #000;
	border: 1px solid #fff;
}
.circle_button
{
	font-size: 25px;
    position: relative;
    bottom: 464px;	
    right: 134px;
    float: right;
    width: 147px;
    height: 47px;
}
.rectangle_button
{
	font-size: 25px;
    position: relative;
    bottom: 406px;
    left: 14px;
    float: right;
    width: 147px;
    height: 47px;

}
.square_button
{
	font-size: 25px;
    position: relative;
    bottom: 349px;
    left: 161px;
    float: right;
    width: 147px;
    height: 47px;
}
.animated_button
{
	font-size: 25px;
    position: relative;
    bottom: 289px;
    left: 308px;
    float: right;
    width: 146px;
    height: 62px;
}
#container {
  margin: 40px;
  width: 360px;
  height: 80px;
}
#container1 {
  position:relative;
  bottom:104px;
  left:15px;
  margin: 40px;
  width: 328px;
  height: 100px;
}
#container2 { 
  position:relative;
  top:126px;
  right:15px;
  margin: 40px;
  width: 388px;
  height: 100px;
}
#container3 { 
  position:relative;
  top:250px;
  right:32px;
  margin: 40px;
  width: 422px;
  height: 100px;
}
#container4 { 
  position:relative;
  top:372px;
  right:48px;
  margin: 40px;
  width: 457px;
  height: 100px;
}
#container5 { 
   position:relative;
  bottom:232px;
  left:29px;
  margin: 40px;
  width: 300px;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/0.9.0/progressbar.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title>JS_module_Canvas</title>
	<link rel="stylesheet" type="text/css" href="js_module_vishal.css"/>
	<script src="js_module_vishal.js"></script>
</head>
<body>
<p id="cvc">
	<canvas id="main_canvas" width="1000"  height="500">
		
	</canvas>
</p>
<div>
	<button type="button" id="cir" class="circle_button canvas_button" onclick="circle()">Circle</button>
</div>
<div>
	<button type="button" id="rec" class="rectangle_button canvas_button" onclick="rectangle()">Rectangle</button>
</div>
<div>	
	<button type="button" id="sqr" class="square_button canvas_button" onclick="square()">Square</button>
</div>
<div>
	<button type="button" class="animated_button canvas_button" onclick="rainbow()">Animated Rainbow
	
	
	</button>
  <div id="container4"></div>
		<div id="container3"></div>
		<div id="container2"></div>
		<div id="container"></div>
		<div id="container1"></div>
		<div id="container5"></div>
		<div id="container6"></div>
</div>
https://stackoverflow.com/questions/ask#
</body>
</html>