I am trying to make a canvas with a black square and a moving white circle but it is not working and i dont know why here is the issue it is just an empty webpage when i try to open it. I have saved and evreything. i really need help! here is the code
<html>
<head>
<title>paddle</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas
var canvasContext
var ballX = 5
window.onload = function() {
var fps = 30;
setInterval(updateAll, 1000)
canvas = document.getElementById("myCanvas");
canvasContext = canvas.getContext("2d")
}
function updateAll() {
ballX++
canvasContext.fillStyle = "black"
canvasContext.fillRect(0, 0, canvas.width, canvas.height)
canvasContext.fillStyle = "white";
canvasContext.beginPath()
canvasContext.arc(ballX, 100, 10, 0, Math.PI*2 true);
}
</script>
</body>
</html>
You're missing a comma before the last argument here (between Math.PI*2 and true):
canvasContext.arc(ballX, 100, 10, 0, Math.PI*2 true);
Related
i am trying to make a blue square move across the X axis when i click the button i made.
When i push the button nothing happens. I dont know what im doing wrong.
Here is the code:
<html>
<head>
<canvas id="myCanvas" width="600" height="600"></canvas>
<title>tilte</title>
</head>
<body>
<button onclick="draw">/button>
<script>
onload = function() {
var canvas = document.getElementById("myCanvas")
var ctx = canvas.getContext("2d")
var recX = 250
var recY = 500
var speedX = 5;
draw()
move()
function draw() {
ctx.fillStyle = "red"
ctx.fillRect(0, 0, 600, 600)
ctx.fillStyle = "blue"
ctx.fillRect(recX, recY, 50, 50)
}
}
</script>
</body>
</html>
change the onload function into onClick, and call "onClick();" from the button...
<canvas id="myCanvas" width="600" height="600"></canvas>
<button onclick="onClick();">click to draw</button>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
function onClick()
{
let recX = 250;
let recY = 500;
let speedX = 5;
draw(recX,recY);
move();
}
function draw(recX,recY)
{
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 600, 600);
ctx.fillStyle = "blue";
ctx.fillRect(recX, recY, 50, 50);
}
</script>
is all you need
hello i am trying to make a white circle move across a black box in javascript my circle is not showing up the big black box does but the circle does not show up i dont know why i am loading the page in google chrome here is the code
<html>
<head>
<title>paddle</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas
var canvasContext
var ballX = 5
window.onload = function() {
var fps = 30;
setInterval(updateAll, 1000)
canvas = document.getElementById("myCanvas");
canvasContext = canvas.getContext("2d")
canvasContext.fillStyle = "black"
canvasContext.fillRect(0, 0, canvas.width, canvas.height)
}
function updateAll() {
ballX++
canvasContext.fillStyle = "white";
canvasContext.beginPath()
canvasContext.arc(ballX, 100, 10, 0, Math.PI*2, true);
canvasContext.stroke()
}
</script>
</body>
</html>
The problem is that you are using stroke to draw the circle but you have not set the stroke style which is by default black. So you are drawing a black circle on a black background. Hence no see circle.
Also it is best to use requestAnimationFrame to animate rather than set interval.
Example animating a circle
requestAnimationFrame(animationLoop);
const ctx = myCanvas.getContext("2d");
var ballX = 5;
var speed = 1
const radius = 10;
const fps = 30;
var frameCount = 0;
function animationLoop() {
if (frameCount % (60 / fps) === 0) {
ctx.fillStyle = "black"
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
draw();
}
frameCount ++;
requestAnimationFrame(animationLoop);
}
function draw() {
ballX = (ballX + speed) % (ctx.canvas.width + radius * 2);
ctx.strokeStyle = "white";
ctx.lineWidth = 2;
ctx.beginPath()
ctx.arc(ballX - radius, 20, 10, 0, Math.PI * 2);
ctx.stroke()
}
<canvas id="myCanvas" width="600" height="40"></canvas>
Hello I wanted to know if anyone can provide tips or direction on an issue i'm having with a triangle animation. I have a partial animation that is not continuous, it jitters at the end of the animation. I'm looking for advise how to make a full rotation. If anyone can also assist in how to add multiple rotations that would be amazing.
Thank you ..
<!DOCTYPE html>
<html>
<head>
<title>Triangle Animation Team B</title>
</head>
<body>
<canvas id="canvas" width="900" height="600"></canvas>
<script>
function makeTriangle(x1,y1,x2,y2,x3,y3) {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var Array = ['red','green', 'black'];
var color = Array[Math.floor(Math.random() * 3)];
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.lineTo(x1,y1);
ctx.fillStyle = color;
ctx.fill();
}
}
makeTriangle('400','38','465','76','200','400');
var x = 200;
window.setInterval( function() {
var context = document.getElementById('canvas').getContext('2d');
context.clearRect(0, 0, 1000, 500, 0);
x++;
if (x > 500) x = 300;
makeTriangle('400','38',x,'76','400','200');
}, 20);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
window.onload = function(){
var canvas = document.getElementById("map"),
c = canvas.getContext("2d");
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
c.fillStyle = "red";
c.fillRect = (20, 30, 50, 250);
c.fillSyle = "white";
c.fillRect = (50,50,25,25);
};
</script>
</head>
<body>
<canvas id="map" width="800" height="400">
<img src="images/sad dinosaur.jpg" />
You will need an updated browser to view this page!
</canvas>
</body>
</html>
I am just tinkering a bit with canvas trying to get a feel for how it works. However, the tutorial video I am watching shows the coding for the c.fillRect and the c.fillStyle in the exact same format that i have shown in my code yet my screen only displays the black rectangle from the first set of instructions.
The syntax for fillRect is c.fillRect(...), as opposed to c.fillRect = (...). Compare your last two calls with your first call.
Also, your last fillStyle is mistyped as fillSyle.
window.onload = function () {
var canvas = document.getElementById("map"),
c = canvas.getContext("2d");
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
c.fillStyle = "red";
c.fillRect(20, 30, 50, 250);
c.fillStyle = "white";
c.fillRect(50, 50, 25, 25);
};
WORKING EXAMPLE
Hi I have managed to make excanvas work in IE8 for simple examples however I couldn't make the following canvas example which contain drawimage work at IE8. Does anyone have any experience with excanvas and drawimage.
Thanks for your help...
var foo = document.getElementById("foo");
var canvas = document.createElement('canvas');`
canvas.setAttribute("width", 300);
canvas.setAttribute("height", 300);
foo.appendChild(canvas);
canvas= G_vmlCanvasManager.initElement(canvas);
var ctx = canvas.getContext('2d');
ctx.save();
ctx.clearRect( 0, 0, canvas.width, canvas.height );
ctx.translate( canvas.width/2 , canvas.height/2 );
ctx.drawImage( image, -165, -160 );
ctx.rotate( 100 * Math.PI / 180);
ctx.drawImage( image2, -13, -121.5 );
ctx.restore();
image1.src = 'img.png';
image2.src = 'img2.png';
Use a test case to isolate drawImage:
<!DOCTYPE html>
<html>
<head>
<title>Overflow Test</title>
<style>
body {
text-align: center
}
</style>
<!--[if IE]><script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
var ctx = document.getElementById('c').getContext('2d');
var img = document.images[0];
ctx.rotate(Math.PI / 8);
ctx.drawImage(img, 50, 50);
img.style.display = 'none';
};
</script>
</head>
<body>
<img src="http://opera.com/favicon.ico">
<canvas id="c" width="200" height="200"></canvas>
</body>
</html>
References
Explorer Canvas test cases: drawimage.html