triangle animation issue canvas flip rotation - javascript

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>

Related

HTML Canvas does not refresh (2)

I was told to ask a more specific question etc....
<!DOCTYPE html>
<html>
<body>
<canvas id="RoomCanvas" width="300" height="200">
<!-- ************************************* -->
<!-- The wall is always here -->
<!-- ************************************* -->
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("RoomCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 300, 200);
alert("clear");
doWall("blue", 0);
x = 0;
for (let i = 0; i < 10000; i++) {
x = x + i;
}
alert("left there");
doWall("pink", 47);
function doWall(theColor, xlocation){
ctx.beginPath();
ctx.moveTo(xlocation, xlocation);
ctx.lineTo(xlocation, 100);
ctx.closePath();
ctx.lineWidth = 8;
ctx.strokeStyle = theColor;
ctx.stroke();
}
</script>
</body>
</html>
The Problems:
1 - clear rectangle does not work until the program stops running!
2 - the blue line does not appear until the program stops running!
3 - the pink line does not appear until the program stops running!
My application needs to put the blue line out when the program is doing something. When the program finishes what it is doing the pink line is to be displayed along with the blue line.
What good is a canvas that does not show anything until all the drawing is done?
I hope this better describes the problem. Any help will be greatly appreciated.
Charlie
Here is an example using timeouts
The blue line will draw after 500 milliseconds
The pink line will draw after 2000 milliseconds
var c = document.getElementById("RoomCanvas");
var ctx = c.getContext("2d");
setTimeout(() => { doWall("blue", 10) }, 500);
setTimeout(() => { doWall("pink", 47) }, 2000);
function doWall(theColor, xlocation) {
ctx.beginPath();
ctx.moveTo(xlocation, xlocation);
ctx.lineTo(xlocation, 100);
ctx.closePath();
ctx.lineWidth = 8;
ctx.strokeStyle = theColor;
ctx.stroke();
}
<canvas id="RoomCanvas" width="100" height="100"></canvas>
Here is another example using click events:
var c = document.getElementById("RoomCanvas");
var ctx = c.getContext("2d");
function doWall(theColor, xlocation) {
ctx.beginPath();
ctx.clearRect(0, 0, c.width, c.height)
ctx.moveTo(xlocation, xlocation);
ctx.lineTo(xlocation, 100);
ctx.closePath();
ctx.lineWidth = 8;
ctx.strokeStyle = theColor;
ctx.stroke();
}
<button onclick="doWall('red', 10)">red</button>
<button onclick="doWall('blue', 20)">blue</button>
<button onclick="doWall('pink', 30)">pink</button>
<button onclick="doWall('black', 40)">black</button>
<br>
<canvas id="RoomCanvas" width="100" height="100"></canvas>

javascript canvas webpage not displaying

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);

Repeating image in a canvas with responsive height

I'm trying to create a canvas where I have an image as a background that repeats horizontally and adapts the height automatically.
I've managed to repeat the background image following the x-axis but I'm unable to make the height responsive.
This is my code so far:
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
const bg = new Image();
bg.src = "http://lorempixel.com/100/100";
const draw = () => {
const ptrn = ctx.createPattern(bg, "repeat-x");
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(draw);
};
draw();
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id="canvas" width="1000" height="200"></canvas>
<script src="index.js"></script>
</body>
</html>
TLDR: I would like to be able to have an image within my canvas that repeats horizontally and its height is responsive.
Thanks in advance.
Hopefully the explanation in the comments answers your question. Feel free to ask for clarification.
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
// First stretch the canvas so we can get
// the full size of teh browser window
cvs.style.height = '100vh';
cvs.style.width = '100vw';
// Now adjust actual canvas size to match
const {width, height} = cvs.getBoundingClientRect();
cvs.height = height;
cvs.width = width;
const bg = new Image();
// Should always wait for onload
// before drawing to prevent race condition.
bg.onload = ()=>{
var x=0;
while(x < cvs.width){
ctx.drawImage(bg, x, 0, 100, cvs.height);
x += bg.width;
}
// draw the image a bunch of times
// var x=0, y=0;
// while(x < cvs.width && y < cvs.height){
// ctx.drawImage(bg, x, y);
// x += bg.width;
// if(x > cvs.width){
// x = 0;
// y += bg.height;
// }
// }
};
bg.src = "http://lorempixel.com/100/100";
<canvas id="canvas"></canvas>
<script src="index.js"></script>
If I got it right you want to fill the height and repeat horizontally, is that correct?
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
var bg = new Image();
bg.src = "http://lorempixel.com/100/100";
var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
var imgWidth = 200;
var imgHeight = 200;
const draw = () => {
tempCanvas.width = imgWidth;
tempCanvas.height = imgHeight;
tCtx.drawImage(bg, 0, 0, 100, 100, 0, 0, imgWidth, imgHeight);
const ptrn = ctx.createPattern(tempCanvas , "repeat-x");
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(draw);
};
bg.onload = () => {
draw();
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id="canvas" width="1000" height="200"></canvas>
<script src="index.js"></script>
</body>
</html>
try setting up the image size to match the canvas size just like that:
bg.src = "http://lorempixel.com/200/200";
Cheers! :)

how to animate 100 circles using canvas and javascript?

I am trying to create a blackhole simulation that will display a blackhole and 100 circles travelling away from it at a speed that would be decreasing because of gravity. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test trou noir</title>
<script>
var canvas = document.getElementById ("space");
var ctx = canvas.getContext ('2d');
var blackhole;
var circle = new Array();
window.onload = init;
function init (){
var G = 6.67e-11, //gravitational constant
c = 3e8, //speed of light (m/s)
M = 12e31, // masseof the blackhole in kg (60 solar masses)
Rs = (2 * G * M) / 9e16, //Schwarzchild radius
pixel_Rs = Rs / 1e3;// scaled radius
blackhole = new Ball (pixel_Rs, 700, 400, "black");
blackhole.draw ();
};
function Ball (radius, posX, posY, color){
this.radius = radius;
this.posX = posX;
this.posY = posY;
this.color = color;
}
Ball.prototype.draw = function (ctx){
var ctx = canvas.getContext ('2d');
ctx.fillStyle = this.color;
ctx.beginPath ();
ctx.arc (this.posX, this.posY, this.radius, 0, 2*Math.PI);
ctx.closePath ();
ctx.fill();
};
</script>
<style>
body {
background-color:#021c36 ;
margin: 0px;}
</style>
</head>
<body>
<canvas id ="space", width = "1400", height = "800">
</canvas>
</body>
</html>
Can someone tell me why I can't make the canvas draw the blackhole and how to create those 100 circles and animate them, I have literally tried everything and I can't make it work
Thanks a lot
You're missing the canvas from your html:
<canvas id="space"/>
You need to pass ctx to your draw function:
blackhole.draw(ctx);
Though it still doesn't draw, but that might be because of the sizes/colors.
update:
Here's a version that you can see: https://jsfiddle.net/gjwh33mq/2/ From here you can gradually change the numbers. (There's some strange bug, the window.onload is not getting called, so I added a call at the end of the js)

draw multiple circles with array elements as text centered in them using javascript

I'm trying to draw multiple circles on a canvas with array elements centered in each of them & want to arrange them in a wheel-like structure. Later, I'll add line links to them. I've researched & found similar questions but even after following them, I'm not able to draw them on the canvas and I'm not sure what I'm doing wrong. Can somebody please help me? Below is the entire HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body >
<canvas id="mindMap" width="500" height="500" style="border:1px solid red">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>
<script type ="text/javascript">
var texts = [Pizza, Crust, Thick, Measurements, Size];
var canvas = document.getElementById('mindMap');
var ctx = canvas.getContext('2d');
var w = canvas.width/2;
var h = canvas.height/2;
var r = 20;
//Draw user-entered words on canvas
for (var i = 0; i < texts.length; ++i) {
ctx.fillStyle = '#C0B7EE';
ctx.arc(w, h, r, 0, 2*Math.PI);
ctx.fill();
ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.font = '12px Arial';
ct.textAlign = 'center';
ctx.fillText(texts[i], w, h+3);
w -= 50;
h -= 50;
}
</script>
Your texts array probably should be filled with strings:
var texts = ['Pizza', 'Crust', 'Thick', 'Measurements', 'Size'];
Also you need to add ctx.beginPath() before drawing a circle, and you had a type next to ctx.textAlign.
Take a look at the code here.

Categories