So I have been working on a neural network, and I was cleaning up the code earlier today so that I can include it in 2 libraries (as objects) so that I do not have to worry about graphics, and can worry about the actual logic. I have checked JSHint.com (A version of JSLint, basically), and there seems to be nothing wrong with my code. However, when I try to run my code, I get the error this.ctx is undefined. I tried to remove the this keyword, but got ctx is undefined. Here is a copy of my code. I was running it in a basic template with a canvas already created, so there was no need for the first method in the init function. So my questions are:
• Why is this.ctx undefined?
• Why does this work when I do init, drawNodes, and drawNodeConnectors from the console?
• Are there any ways that I can avoid using the this keyword ever time I reference ctx besides a global variable?
var graphics = {
init: function(overlay){
if(!overlay){
this.newCanvas = document.createElement('canvas');
this.newCanvas.id = "canvas";
this.width = 640;
this.height = 360;
document.body.appendChild(this.canvas);
}
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.pi = Math.PI;
},
blackout: function(){
this.ctx.fillStyle = "black";
this.ctx.globalAlpha = 1;
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
},
drawCircle: function(x, y, radius){
this.ctx.beginPath();
this.ctx.fillStyle = "white";
this.ctx.strokeStyle = "white";
this.ctx.globalAlpha = 1;
this.ctx.arc(x, y, radius, 0, this.pi*2);
this.ctx.stroke();
this.ctx.fill();
},
drawLine: function(x1, y1, x2, y2, alpha){
this.ctx.beginPath();
this.ctx.strokeStyle = "white";
this.ctx.lineWidth = 5;
this.ctx.globalAlpha = alpha;
this.ctx.moveTo(x1, y1);
this.ctx.lineTo(x2, y2);
this.ctx.stroke();
this.ctx.closePath();
},
drawText: function(x, y, text, size){
this.ctx.font = size+"px Times";
this.ctx.fillText(text, x, y);
},
textOffset: function(text, size){
this.ctx.font = size+"px Times";
return this.ctx.measureText( text.toString() ).width / 2;
},
drawNodes: function(){
this.drawCircle(100, 100, 50);
this.drawCircle(100, 260, 50);
this.drawCircle(300, 75, 25);
this.drawCircle(300, 180, 25);
this.drawCircle(300, 285, 25);
this.drawCircle(500, 180, 75);
},
genWeights: function(){
for(this.i = 1; this.i < 9; this.i ++){
eval("this.w" + this.i + " = Math.random();");
}
},
drawNodeConnectors: function(){
this.ctx.fillStyle = "white";
this.drawLine(100, 100, 300, 75, this.w1);
this.drawLine(100, 100, 300, 180, this.w2);
this.drawLine(100, 100, 300, 285, this.w3);
this.drawLine(100, 260, 300, 75, this.w4);
this.drawLine(100, 260, 300, 180, this.w5);
this.drawLine(100, 260, 300, 285, this.w6);
this.drawLine(300, 75, 500, 180, this.w7);
this.drawLine(300, 180, 500, 180, this.w8);
this.drawLine(300, 285, 500, 180, this.w9);
},
nodeText: function(in1, in2, node1, node2, node3, output1, output2){
this.ctx.fillStyle = "black";
this.ctx.globalAlpha = 1;
this.text(100 - this.textOffset(in1, 36), 100, in1.toString(), 36);
this.text(100 - this.textOffset(in2, 36), 260, in2.toString(), 36);
this.text(300 - this.textOffset(node1, 20), 75, node1.toString(), 20);
this.text(300 - this.textOffset(node2, 20), 180, node2.toString(), 20);
this.text(300 - this.textOffset(node3, 20), 285, node3.toString(), 20);
this.text(500 - this.textOffset(output1, 100), 180, output1.toString(), 100);
this.text(500 - this.textOffset(output2, 25), 225, output2.toString(), 25);
},
test: function(){
this.blackout();
this.init(true);
this.drawNodes();
this.genWeights();
this.drawNodeConnectors();
}
};
graphics.test();
You call blackout first and than you call init second. init is where it defines ctx.
Related
I would like to animate a circle into a line with the radius equaling the width, and I am wondering how I can do this with an Arc? Or perhaps there is a better way?
From
To
Here's my arc:
function drawStar(x,y,size,scale,opacity,ctx){
ctx.save();
ctx.beginPath();
ctx.arc(x,y,size+scale,0,size+scale * Math.PI,false);
ctx.globalAlpha = opacity
ctx.closePath();
setFillStyle('rgb(255,237,219)',ctx);
ctx.fill()
ctx.restore();
}
I tried using ctx.scale(n,1), however it does not keep the same radius(width) and it scales the collection of arcs as a whole (zoom in effect).
Use instead a wide line-width value with "round" lineCap and stroke():
var ctx = c.getContext("2d");
ctx.lineWidth = 50;
ctx.lineCap = "round";
ctx.moveTo(45 , 25);
ctx.lineTo(45.5, 25); // in IE11 this must be slightly offset
ctx.moveTo( 45, 100);
ctx.lineTo(150, 100);
ctx.stroke();
<canvas id=c></canvas>
Remember beginPath() for animation.
You can use Bezier Curves to 'transform' your arc.
There's some math involved in calculating the perfect ends of your stretched circle but I guessed and tweaked my numbers.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(40, 20);
ctx.lineTo(100, 20);
ctx.bezierCurveTo(130, 20, 130, 60, 100, 60);
ctx.lineTo(40, 60);
ctx.bezierCurveTo(10, 60, 10, 20, 40, 20);
ctx.stroke();
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(40, 80);
ctx.bezierCurveTo(68, 80, 68, 120, 40, 120);
ctx.bezierCurveTo(12, 120, 12, 80, 40, 80);
ctx.fill();
ctx.stroke();
<canvas id="myCanvas"></canvas>
You could draw the left and right halves of a circle using arc, then do a fillRect in between to connect them.
Edit: To elaborate on what I said earlier:
function init() {
let canvas = document.getElementById('myCanvas');
canvas.width = 400;
canvas.height = 400;
canvas.style.width = "400px";
canvas.style.height = "400px";
let ctx = canvas.getContext("2d");
function fillArc(ctx, cx, cy, r, startDeg, endDeg) {
ctx.beginPath();
ctx.arc(cx, cy, r, startDeg * Math.PI / 180, endDeg * Math.PI / 180);
ctx.fill();
}
function fillOval(ctx, cx, cy, r, sideLength, skipFirstArc) {
if (!skipFirstArc) {
fillArc(ctx, cx, cy, r, 90, 270);
}
ctx.fillRect(cx, cy - r, sideLength, r * 2);
fillArc(ctx, cx + sideLength, cy, r, 270, 90);
}
let sideLength = 0;
ctx.fillStyle = 'red';
function animateOval() {
if (sideLength === 100) {
ctx.clearRect(0, 0, 400, 400);
}
else {
fillOval(ctx, 30, 30, 25, sideLength, sideLength > 0);
}
++sideLength;
if (sideLength > 100) {
sideLength = 0;
}
}
setInterval(animateOval, 16);
}
Here's a Plunker with the above code running: http://plnkr.co/edit/vNqoUjPKg2lqC7JtYuEb?p=preview
[I am making lines over a circle, but i am unable to change my line color to black. Its continuously showing me white lines.
One more thing, i want my line to half dotted and half normal like the image i have attached.
var canvas = document.getElementById("canvas");
var e = canvas.getContext("2d");
function circle(e, color, x, y, radius, startAngle, endAngle, clockwise) {
if (arguments.length < 9) return alert("Not enough arguments.\nThe function \"circle\" requires 9 arguments\nYou provided only " + arguments.length + ".");
e.beginPath();
e.arc(x, y, radius, startAngle, endAngle, clockwise);
e.strokeStyle = color;
e.stroke();
}
function draw(e, radius) {
var deg360 = Math.PI * 2;
circle(e, "#00688B", 225, 225, 165, deg360, 0, deg360, true);
e.fillStyle = '#00688B';
e.fill();
circle(e, "#0099CC", 225, 225, 140, deg360, 0, deg360, true);
e.fillStyle = '#0099CC';
e.fill();
circle(e, "#33A1DE", 225, 225, 115, deg360, 0, deg360, true);
e.fillStyle = '#33A1DE';
e.fill();
circle(e, "#7EC0EE", 225, 225, 90, deg360, 0, deg360, true);
e.fillStyle = '#7EC0EE';
e.fill();
circle(e, "#98CCE6", 225, 225, 65, deg360, 0, deg360, true);
e.fillStyle = '#98CCE6';
e.fill();
e.closePath();
{
e.closePath();
e.stroke();
e.strokestyle = "Black";
e.beginPath();
e.linewidth = "17";
e.moveTo(225, 225);
e.lineTo(320, 175);
e.strokestyle = "Black";
e.stroke();
e.beginPath();
e.setLineDash([2]);
e.lineto(111, 322)
e.stroke();
circle(e, "#E6E8FA", 225, 225, 45, deg360, 0, deg360, true);
e.fillStyle = '#E6E8FA';
e.fill();
e.fill();
e.fillStyle = "black"; // font color to write the text with
e.font = radius * 0.18 + "px arial";
e.textBaseline = "middle";
e.textAlign = "center";
e.fillText(0, radius, e);
for (num = 0; num < 25; num++) {
ang = num * Math.PI / 12;
e.translate(225, 225);
e.rotate(ang);
e.translate(0, -radius);
e.rotate(-ang);
e.fillText(num.toString(), 0, 0);
e.rotate(ang);
e.translate(0, +radius);
e.rotate(-ang);
e.setTransform(1, 0, 0, 1, 0, 0);
}
}
for stroke color.you are using e.strokestyle but it should be e.strokeStyle .
var canvas = document.getElementById("canvas");
var e = canvas.getContext("2d");
draw(e, 50);
function circle(e, color, x, y, radius, startAngle, endAngle, clockwise) {
if (arguments.length < 9) return alert("Not enough arguments.\nThe function \"circle\" requires 9 arguments\nYou provided only " + arguments.length + ".");
e.beginPath();
e.arc(x, y, radius, startAngle, endAngle, clockwise);
e.strokeStyle = color;
e.stroke();
}
function draw(e, radius) {
var deg360 = Math.PI * 2;
circle(e, "#00688B", 225, 225, 165, deg360, 0, deg360, true);
e.fillStyle = '#00688B';
e.fill();
circle(e, "#0099CC", 225, 225, 140, deg360, 0, deg360, true);
e.fillStyle = '#0099CC';
e.fill();
circle(e, "#33A1DE", 225, 225, 115, deg360, 0, deg360, true);
e.fillStyle = '#33A1DE';
e.fill();
circle(e, "#7EC0EE", 225, 225, 90, deg360, 0, deg360, true);
e.fillStyle = '#7EC0EE';
e.fill();
circle(e, "#98CCE6", 225, 225, 65, deg360, 0, deg360, true);
e.fillStyle = '#98CCE6';
e.fill();
e.closePath(); {
e.beginPath();
e.strokeStyle = "black";
e.linewidth = "17";
e.moveTo(225, 225);
e.lineTo(320, 175);
e.strokeSstyle = "black";
e.stroke();
e.beginPath();
e.setLineDash([2]);
e.lineto(111, 322);
e.stroke();
circle(e, "#E6E8FA", 225, 225, 45, deg360, 0, deg360, true);
e.fillStyle = '#E6E8FA';
e.fill();
e.fill();
e.fillStyle = "black"; // font color to write the text with
e.font = radius * 0.18 + "px arial";
e.textBaseline = "middle";
e.textAlign = "center";
e.fillText(0, radius, e);
for (num = 0; num < 25; num++) {
ang = num * Math.PI / 12;
e.translate(225, 225);
e.rotate(ang);
e.translate(0, -radius);
e.rotate(-ang);
e.fillText(num.toString(), 0, 0);
e.rotate(ang);
e.translate(0, +radius);
e.rotate(-ang);
e.setTransform(1, 0, 0, 1, 0, 0);
}
}
}
<canvas id="canvas" width="400" height="500" class="playable-canvas"></canvas>
for half dotted line, you have find the midpoint of the line and draw one half with normal stroke and another half by setting setLineDash.
see the example
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
halfDotLine(0, 0, 100, 100, ctx);
function halfDotLine(x1, y1, x2, y2, ctx) {
ctx.lineWidth = 3;
ctx.strokeStyle = "#FF0000";
ctx.beginPath();
// calculate the midpoint of the line and draw half line with normal stroke from midpoint to end
ctx.moveTo((x1 + x2) / 2, (y1 + y2) / 2);
ctx.lineTo(x2, y2);
ctx.stroke();
// for dotted line draw the line by setting linedash array from start to midpoint.
ctx.setLineDash([3, 3]);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo((x1 + x2) / 2, (y1 + y2) / 2);
ctx.stroke();
}
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
strokeStyle is case sensitive !
When you write e.strokestyle = "Black";, Javascript does not complain. But you get nothing. Just change to e.strokeStyle = "Black";.
I try to get zoom effect instead of scaling just with div movement's (left, top) and increase canvas size:
i bind mouse click for this functionality:
first click works perfect (where i click there zoom in)
second click doesn't work (where i click not zoom in this position)
i need get zoom like this: http://phrogz.net/tmp/canvas_zoom_to_cursor.html but not use scale and translate i just need use $(div).css('left', 'xPX') and $(div).css('top', 'xPX');
/* DOCUMENTATION:
first click = 1.4 scale
second click = 1.8 scale
i try to get zoom effect instead of scaling just with div movement's (left, top):
first click works perfect (where i click there zoom in)
second click doesn't work (where i click not zoom in this position)
*/
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
$('#p').css('left', '100px');
$('#p').css('top', '100px');
var click = 0;
draw100Scale();
$(document).click(function(e) {
var pos = getMousePos(e);
if(click == 0) {
/* FIRST CLICK == FIRST ZOOM */
canvas.width = 700; //500 + 40% = 700
canvas.height = 700; //500 + 40% = 700
$('#p').css('left', $('#p').offset().left + $('#p').offset().left * 40 / 100 - pos.x * 40 / 100);
$('#p').css('top',
$('#p').offset().top + $('#p').offset().top * 40 / 100 - pos.y * 40 / 100);
draw140Scale();
click++;
} else {
/* SECOND CLICK = SECOND ZOOM */
canvas.width = 900; //500 + 80% = 900
canvas.height = 900; //500 + 80% = 900
$('#p').css('left', $('#p').offset().left + $('#p').offset().left * 80 / 100 - pos.x * 80 / 100);
$('#p').css('top',
$('#p').offset().top + $('#p').offset().top * 80 / 100 - pos.y * 80 / 100);
draw180Scale();
click++;
}
});
/* FUNCTIONS */
function getMousePos(evt) {
evt = evt.originalEvent || window.event || evt;
if (evt.clientX !== undefined && evt.clientY !== undefined) {
return {
x: evt.clientX,
y: evt.clientY
};
}
}
function draw100Scale() {
ctx.fillStyle = '#CECECE';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);
ctx.fillStyle = 'green';
ctx.fillRect(100, 200, 100, 100);
ctx.fillStyle = 'blue';
ctx.fillRect(100, 300, 100, 100);
ctx.fillStyle = 'yellow';
ctx.fillRect(200, 100, 100, 100);
ctx.fillStyle = 'pink';
ctx.fillRect(200, 200, 100, 100);
ctx.fillStyle = 'orange';
ctx.fillRect(200, 300, 100, 100);
ctx.fillStyle = 'violet';
ctx.fillRect(300, 100, 100, 100);
ctx.fillStyle = 'grey';
ctx.fillRect(300, 200, 100, 100);
ctx.fillStyle = 'white';
ctx.fillRect(300, 300, 100, 100);
}
function draw140Scale() {
ctx.fillStyle = '#CECECE';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(140, 140, 140, 140);
ctx.fillStyle = 'green';
ctx.fillRect(140, 280, 140, 140);
ctx.fillStyle = 'blue';
ctx.fillRect(140, 420, 140, 140);
ctx.fillStyle = 'yellow';
ctx.fillRect(280, 140, 140, 140);
ctx.fillStyle = 'pink';
ctx.fillRect(280, 280, 140, 140);
ctx.fillStyle = 'orange';
ctx.fillRect(280, 420, 140, 140);
ctx.fillStyle = 'violet';
ctx.fillRect(420, 140, 140, 140);
ctx.fillStyle = 'grey';
ctx.fillRect(420, 280, 140, 140);
ctx.fillStyle = 'white';
ctx.fillRect(420, 420, 140, 140);
}
function draw180Scale() {
ctx.fillStyle = '#CECECE';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(180, 180, 180, 180);
ctx.fillStyle = 'green';
ctx.fillRect(180, 360, 180, 180);
ctx.fillStyle = 'blue';
ctx.fillRect(180, 540, 180, 180);
ctx.fillStyle = 'yellow';
ctx.fillRect(360, 180, 180, 180);
ctx.fillStyle = 'pink';
ctx.fillRect(360, 360, 180, 180);
ctx.fillStyle = 'orange';
ctx.fillRect(360, 540, 180, 180);
ctx.fillStyle = 'violet';
ctx.fillRect(540, 180, 180, 180);
ctx.fillStyle = 'grey';
ctx.fillRect(540, 360, 180, 180);
ctx.fillStyle = 'white';
ctx.fillRect(540, 540, 180, 180);
}
* {
margin: 0px;
padding: 0px;
}
#c {
position: absolute;
}
#p {
position: absolute;
left: 0px;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='p'>
<canvas id='c' width='500' height='500'></canvas>
</div>
I have a simple animation which shows a gas meter moving from green to red. I am simply drawing, clearing and then redrawing the image on a timer to try and simulate animation. Although it kind of works, the animation lags and sometimes just goes back and forward after it should have been completed.
Heres the code:
function meter(){
requestAnimationFrame(meter);
setTimeout(function() {
var radius = 40;
ctx.clearRect(500, 200, 100, 100);
ctx.beginPath();
ctx.arc(550, 250, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(192, 192, 192, 0.4)';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.fillStyle = "#ffcc4a";
ctx.fillRect(525, 220, 50, 60);
ctx.fillStyle = "#ffffff";
ctx.fillRect(528, 225, 44, 45);
var grd = ctx.createLinearGradient(510, 0, 670, 0);
grd.addColorStop(0, "black");
grd.addColorStop(0.25, "yellow");
grd.addColorStop(0.5, "red");
ctx.fillStyle = grd;
ctx.fillRect(530, 228, 40, 30);
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.arc(550, 264, 5, 0, 2 * Math.PI, false);
ctx.moveTo(549, 260);
ctx.lineTo(548, 240);
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.closePath();
ctx.closePath();
//ctx.clearRect(500, 200, 100, 100);
}, 2000);
setTimeout(function() {
var radius = 40;
ctx.clearRect(500, 200, 100, 100);
ctx.beginPath();
ctx.arc(550, 250, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(192, 192, 192, 0.4)';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.fillStyle = "#ffcc4a";
ctx.fillRect(525, 220, 50, 60);
ctx.fillStyle = "#ffffff";
ctx.fillRect(528, 225, 44, 45);
var grd = ctx.createLinearGradient(510, 0, 670, 0);
grd.addColorStop(0, "black");
grd.addColorStop(0.25, "yellow");
grd.addColorStop(0.5, "red");
ctx.fillStyle = grd;
ctx.fillRect(530, 228, 40, 30);
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.arc(550, 264, 5, 0, 2 * Math.PI, false);
ctx.moveTo(549, 260);
ctx.lineTo(558, 240);
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.closePath();
ctx.closePath();
//ctx.clearRect(500, 200, 100, 100);
}, 2500);
setTimeout(function() {
var radius = 40;
ctx.clearRect(500, 200, 100, 100);
ctx.beginPath();
ctx.arc(550, 250, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(192, 192, 192, 0.4)';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.fillStyle = "#ffcc4a";
ctx.fillRect(525, 220, 50, 60);
ctx.fillStyle = "#ffffff";
ctx.fillRect(528, 225, 44, 45);
var grd = ctx.createLinearGradient(510, 0, 670, 0);
grd.addColorStop(0, "black");
grd.addColorStop(0.25, "yellow");
grd.addColorStop(0.5, "red");
ctx.fillStyle = grd;
ctx.fillRect(530, 228, 40, 30);
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.arc(550, 264, 5, 0, 2 * Math.PI, false);
ctx.moveTo(549, 260);
ctx.lineTo(568, 240);
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.closePath();
ctx.closePath();
//ctx.clearRect(500, 200, 100, 100);
}, 3000);
}
It looks to me that you'll have enough time to call the requestAnimationFrame function a bunch of times while the first setTimeout funtions are waiting to fire and draw stuff. This mean that you'll probably end up starting the setTimeout timers a few houndred times before the first one fires.
This is basically what you have:
function meter(){
requestAnimationFrame(meter);
setTimeout(function() {
//drawing stuff
}, 2000);
setTimeout(function() {
//drawing stuff
}, 2500);
setTimeout(function() {
//drawing stuff
}, 3000);
}
You're drawing the same thing three times with one small change. Instead, make it into 1 function with a parameter:
function meter(indicatorPosition){
//black circle
var radius = 40;
ctx.clearRect(500, 200, 100, 100);
ctx.beginPath();
ctx.arc(550, 250, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(192, 192, 192, 0.4)';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
//yellow rectangle
ctx.fillStyle = "#ffcc4a";
ctx.fillRect(525, 220, 50, 60);
//white rectangle over yellow
ctx.fillStyle = "#ffffff";
ctx.fillRect(528, 225, 44, 45);
//meter gradient background
var grd = ctx.createLinearGradient(510, 0, 670, 0);
grd.addColorStop(0, "black");
grd.addColorStop(0.25, "yellow");
grd.addColorStop(0.5, "red");
ctx.fillStyle = grd;
ctx.fillRect(530, 228, 40, 30);
//circle and indicator
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.arc(550, 264, 5, 0, 2 * Math.PI, false);
ctx.moveTo(549, 260);
ctx.lineTo(indicatorPosition, 240); //this is the only variable!
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.closePath();
}
Now to make it move:
if you want it to move every 0.5 seconds, it's better to use the setInterval.
var meterPosition = 548 //your starting position
var myInterval = setInterval(function() {
//each run we draw the meter
meter(meterPosition);
//Then we want to add 10 to the meter position
meterPosition+=10;
//We don't want the meter to go nuts and disappear to the right, so we'll make it reset after 3 moves
if (meterPosition > 568) {
meterPosition = 548;
}
},500);
Here's a fiddle with the code in action: http://jsfiddle.net/Niddro/7jxknwk4/
Here is my JavaScript code:
function Show(output, startX, startY){
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.arc(startX, startY, 3, 0, Math.PI*2, true);
context.fill();
context.arc(startX + 50, startY, 3, 0, Math.PI*2, true);
context.stroke();
}
Show(outputcpu, 50, 50);
Show(outputio, 70, 50);
I have expect some thing like: o-o o-o.
But not sure why I get: o-o-o-o.
How to remove the center stroke? (I want to remove the second line o-o*-*o-o)
beginPath will seperate your calls: http://jsfiddle.net/CmuT7/1
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
function Show(output, startX, startY) {
context.beginPath();
context.arc(startX, startY, 3, 0, Math.PI * 2, true);
context.fill();
context.arc(startX + 50, startY, 3, 0, Math.PI * 2, true);
context.stroke();
}
Show('', 50, 50);
Show('', 70, 70);
You need to use moveTo() or beginPath() function to avoind line between those arcs.
function Show(output, startX, startY){
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.arc(startX, startY, 3, 0, Math.PI*2, true);
context.fill();
context.moveTo(startX +50, startY);
context.arc(startX + 50, startY, 3, 0, Math.PI*2, true);
context.stroke();
}
Show(outputcpu, 50, 50);
Show(outputio, 70, 50);