I want to refresh my canvas after every x seconds without refreshing the whole page.
<script>
$(document).ready(function ()
{
var odo = new RGraph.Odometer({
id: 'cvs',
min: 0,
max: 360,
value: <?php echo $windDirDeg; ?>
}).draw();
</script>
<body>
<canvas id="cvs" width="300" height="300"></canvas>
</body>
To clear the canvas you can use the RGraph API:
var ca = document.getElementById('cvs');
RGraph.clear(ca, 'white'); // The colour is optional (the default is transparent)
http://www.rgraph.net/docs/api.html
May be this:
x = 3000ms
setInterval(function(){
context.clearRect(0, 0, canvas.width, canvas.height);
alert("Canvas cleared");
},
3000);
Full example:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
setInterval(function(){
ctx.clearRect(0, 0, c.width, c.height);
alert("Canvas cleared");
},
3000);
</script>
</body>
</html>
See this example
Related
<hmtl>
<head>
<!--<script src='main.js'></script>-->
</head>
<body>
<canvas id='myCanvas'> </canvas>
<script>
function shape(x,y){
this.x=x;
this.y=y;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect( this.x, this.y, 50, 50);
}
}
var sqr=new shape(100,100)
sqr.x+=100
</script>
</body>
</hmtl>
why i add 100 to x and hope its positon will be (200,100) but when i open live sever it position still remain (100,100)
Because it will only change the value of x, you have to draw it again on the canvas and before drawing again we have to clear canvas using clearRect
<html>
<head>
<!--<script src='main.js'></script>-->
</head>
<body>
<canvas id='myCanvas'> </canvas>
<script>
function shape(x,y){
this.x=x;
this.y=y;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
this.draw = ()=>{
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FF0000";
ctx.fillRect( this.x, this.y, 50, 50);
ctx.stroke();
}
}
var sqr=new shape(100,100)
sqr.draw();
sqr.x+=-100
sqr.draw();
</script>
</body>
</html>
I am trying to draw something very basic to my canvas but its not drawing anything neither showing any errors to fix. what could be the issue here ?
Here's my code :
I also tried moving the js code to an external js file but did't work.
<body>
<canvas
id="myCanvas"
width="800"
height="500"
style="border:1px solid #474747;"
></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect = (10, 100, 15, 400);
</script>
Your issue is with:
ctx.fillRect = (10, 100, 15, 400);
.fillRect() is a method which takes a x, y, width, height as it parameters, so you need to call it like so:
ctx.fillRect(10, 100, 15, 400);
See example below:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 100, 15, 400);
<canvas id="myCanvas" width="800" height="500" style="border:1px solid #474747;"></canvas>
ctx.fillRect = (10, 100, 15, 400); <-- fillRect() is a function, you're using it as an expression.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 100, 15, 400);
<canvas
id="myCanvas"
width="800"
height="500"
style="border:1px solid #474747;"
></canvas>
I am trying to make to objects move towards each other in Canvas, when they meet and overlap one should then disappear and the other should fall down. Now I got the animation to do that, but one of the items is flickering.
<!DOCTYPE html>
<html>
<head>
<style>
canvas{border:#666 3px solid;}
</style>
</head>
<body onload="draw(530,15); draw1(1,15);">
<canvas id="canvas" width="600" height="400"></canvas>
<script>
function draw(x,y){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.clearRect(x, y, 600, 400);
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect (x, y, 70, 50);
ctx.restore();
x -= 0.5;
if(x==300)
{
return;
};
var loopTimer = setTimeout('draw('+x+','+y+')',5);
};
function draw1(w,e){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.clearRect(w-1,e-2,600,400);
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect (w, e, 70, 50);
ctx.restore();
w += 1;
if(w==265)
{
w -= 1;
e +=2;
};
var loopTimer = setTimeout('draw1('+w+','+e+')',10);
};
</script>
</body>
</html>
Been trying for two days, but can't seem to fix it properly. Thanks in advance.
You are rendering too many frames per second forcing the browser to present frames. Each time a draw function returns the browser presumes you want to present the frame to the page.
Animations need to be synced to the display refresh rate which for most devices is 60FPS. To do this you have one render loop that handles all the animation. You call this function via requestAnimationFrame (RAF) which ensures that the animation stays in sync with the display hardware and browser rendering.
<!DOCTYPE html>
<html>
<head>
<style>
canvas{border:#666 3px solid;}
</style>
</head>
<!-- dont need this <body onload="draw(530,15); draw1(1,15);">-->
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var canvas,ctx,x,y,w,e;
var canvas,ctx,x,y,w,e;
function draw() {
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect(x, y, 70, 50);
};
function draw1(w, e) {
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect(w, e, 70, 50);
};
function update(time){ // high precision time passed by RAF when it calls this function
ctx.clearRect(0,0,canvas.width,canvas.height); // clear all of the canvas
if(w + 70 >= x){
e += 2;
}else{
x -= 0.75;
w += 1;
};
draw(x,y);
draw1(w,e);
requestAnimationFrame(update)
// at this point the function exits and the browser presents
// the canvas bitmap for display
}
function start(){ // set up
x = 530;
y = 15;
w = 1;
e = 15;
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
requestAnimationFrame(update)
}
window.addEventListener("load",start);
</script>
</body>
</html>
You're method of animation is very outdated (ie, the use of setTimeout). Instead you should be using requestAnimationFrame as demonstrated below. This will give smooth, flicker free animation.
<!DOCTYPE html>
<html>
<head>
<style>
canvas{border:#666 3px solid;}
</style>
</head>
<body onload="requestAnimationFrame(animate);">
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 530, y = 15;
function animate(){
requestID = requestAnimationFrame(animate);
ctx.clearRect(x, y, 600, 400);
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect (x, y, 70, 50);
x -= 0.5;
if(x==300)
{
cancelAnimationFrame(requestID)
};
}
</script>
</body>
</html>
the first 2 parameters of ctx.clearReact in both draw functions should be 0:
ctx.clearRect(0, 0, 600, 400);
This means you clear all canvas.
hi i have to covert a set of images to a json object.But, as a first step i was trying to do it for a single image but i don't know whether the json object is created or not.please help me to check whether the object is created.
this is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>HTML5 Example: Canvas</title>
<script>
function drawOnCanvas() {
var ctx=document.getElementById("mycanvas").getContext('2d');
var image=new Image();
image.src="2000.png";
image.onload=function() {
ctx.drawImage(image,140,0);
}
imageData = ctx.getImageData(0, 0, mycanvas.width, mycanvas.height);
var jsontext=JSON.stringify(imageData.data);
}
window.addEventListener('load', drawOnCanvas, true);
</script>
</head>
<body>
<canvas width="1000" height="1000" id="mycanvas"></canvas>
</body>
</html>
<canvas id="canvas" width="400" height="400">
</canvas>
<canvas id="c2" width="400" height="400"></canvas>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(5, 5, 300, 250);
ctx.stroke();
ctx.arc(150, 150, 100, 0, Math.PI, false);
ctx.stroke();
canvas.addEventListener("click", function (){
var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log(data);
console.log(JSON.stringify(data));
var c2 = document.getElementById("c2");
var ctx2 = c2.getContext("2d");
ctx2.putImageData(data, 0, 0);
}, false);
demo: http://jsfiddle.net/LcnbX/
ctx.getImageData() will return an object
JSON.stringify(data) will generate json string for you(see the console)
i have the following code in an html file and when i try to view the code on localhost [MAMP] all i see is a black canvas area with a border around it. i've checked it in chrome and firefox. same results. what am i doing wrong?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000;"></canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function() {
var myCanvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 50, 100, 100);
//close jquery
});
</script>
</body>
so i figured it out. thanks to Ken and Scott for their help.
var myCanvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 50, 100, 100);
should have been
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d"); //should have been myCanvas not canvas
ctx.fillRect(50, 50, 100, 100);
The default fill style of the canvas is black, while the canvas itself starts out as transparent. Set it to something else before calling fillRect, and you'll see better results.
ctx.fillStyle = "#F00"
Or, try this to see multiple rectangles:
var myCanvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
FIDDLE