New to Canvas… I am following the Canvas book(Which is awesome!) added the script tag to my html. I can’t figure out how to take the same shape and build another one in a different position. I keep ending up with multiple shapes on top of each other… I need 3 same shapes starting at the top to middle of the page and the shapes to be different sizes. The positioning is so confusing and hard, the x and y coordinates will be the death of me lol.
Welcome to the forums @sunnyb84 
A later chapter will cover how to draw multiple shapes. Here is the online version: https://www.kirupa.com/canvas/drawing_multiple_things.htm
Does this help?
1 Like
Thank you! Yes, I read that chapter and I was able to make multiple shapes(On top of each other lol) but… I am having difficulties figuring out the numbers and how to get the shape where I want it. Is there a number grid or something that helps you figure out where the numbers are and will end up for the co-ordinates on the page? I am having a hard time understanding the movement part… How do you know where each number will end up? There is 6 rows of 6 numbers for the shape I am working with, and putting the wrong digits will distort the shape or just put it in a spot you don’t want… Sorry, I know I sound so confused(and I am lol), but moving number around seems to be going everything but where I want it to. Is there a better way of understanding this for a newbie 
Can you share your code?
The code for the Orange Circle Animation. It moves from left to right. How would I make my 2 shapes rotate and move to the middle of the canvas and disappear into the can? I tried to add my shapes to the code of the Orange Circle but it did not work since I am most likely forgetting something… I tried adding rotate to the orange and it just makes it go crazy. 
Code for Orange Circle:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Orange Circle</title>
<style>
canvas {
border: #333 10px solid;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="750px" height="550px">
</canvas>
<script>
var mainCanvas = document.querySelector("#myCanvas");
var mainContext = mainCanvas.getContext("2d");
var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;
var xPos = -500;
function drawCircle() {
mainContext.clearRect(0, 0, canvasWidth, canvasHeight);
//color background
mainContext.fillStyle = "#F8F8F8";
mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
//draw circle
mainContext.beginPath();
mainContext.arc(xPos, 125, 75, 0, Math.PI * 2, false);
mainContext.closePath();
mainContext.fillStyle = "#FFCC00";
mainContext.fill();
mainContext.lineWidth = 10;
mainContext.strokeStyle = "#DCB001";
mainContext.stroke();
xPos += 4;
if (xPos > 1000) {
xPos = -500;
}
requestAnimationFrame(drawCircle);
}
drawCircle();
</script>
</body>
</html>
Code for my shapes:
<!DOCTYPE html>
<html>
<head>
<title>Simple Example</title>
<style>
canvas {
border: #333 10px solid;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="550" height="555px"></canvas>
<script>
var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");
//hexagon
context.beginPath();
context.moveTo(10, 60);
context.lineTo(40, 100);
context.lineTo(80, 100);
context.lineTo(110, 60);
context.lineTo(80, 20);
context.lineTo(40, 20);
context.closePath();
context.lineWidth = 1;
context.strokeStyle = "#000000";
context.fillStyle = "#FF0000";
context.fill();
context.stroke();
context.closePath();
//triangle
context.beginPath();
context.moveTo(515, 110);
context.lineTo(400, 110);
context.lineTo(450, 20);
context.closePath();
context.lineWidth = 2;
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.fill();
context.stroke();
context.closePath();
//can
context.beginPath();
context.arc(350, 133, 200, 0.35 * Math.PI, 0.65 * Math.PI, false);
context.lineTo(259,428);
context.arc(350, 250, 200, 0.65 * Math.PI, 0.35 * Math.PI, true);
context.closePath();
// the outline
context.lineWidth = 3;
context.strokeStyle = "darkblue";
context.stroke();
// the fill color
context.fillStyle = "RoyalBlue";
context.fill();
//can top
context.beginPath();
context.arc(350, 485, 200, 1.35 * Math.PI, 1.65 * Math.PI, false);
context.arc(350, 133, 200, 0.35 * Math.PI, 0.65 * Math.PI, false);
context.closePath();
// the outline
context.lineWidth = 3;
context.strokeStyle = "darkblue";
context.stroke();
// the fill color
context.fillStyle = "LightSkyBlue";
context.fill();
</script>
</body>Sorry, but I still don’t understand what you are trying to do. I played with your example, and I see two canvas elements. The left one is of the orange circle sliding.
Can you sketch on paper or something quick that better highlights the type of animation you would like to accomplish?
Thanks,
Kirupa 
Hi! Sorry for the confusion lol. So here is the code I have, I am having trouble with animate. I did good on your orange circle but getting any other shape to move is the issue I am having… I am trying to make my 2 shapes, hexagon and triangle, rotate and fall/move into the blue can and disappear…
<!DOCTYPE html>
<html>
<head>
<title>Simple Example</title>
<style>
canvas {
border: #333 10px solid;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="550" height="555px"></canvas>
<script>
var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");
//hexagon
context.beginPath();
context.moveTo(10, 60);
context.lineTo(40, 100);
context.lineTo(80, 100);
context.lineTo(110, 60);
context.lineTo(80, 20);
context.lineTo(40, 20);
context.closePath();
context.lineWidth = 1;
context.strokeStyle = "#000000";
context.fillStyle = "#FF0000";
context.fill();
context.stroke();
context.closePath();
//triangle
context.beginPath();
context.moveTo(515, 110);
context.lineTo(400, 110);
context.lineTo(450, 20);
context.closePath();
context.lineWidth = 2;
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.fill();
context.stroke();
context.closePath();
//can
context.beginPath();
context.arc(350, 133, 200, 0.35 * Math.PI, 0.65 * Math.PI, false);
context.lineTo(259,428);
context.arc(350, 250, 200, 0.65 * Math.PI, 0.35 * Math.PI, true);
context.closePath();
// the outline
context.lineWidth = 3;
context.strokeStyle = "darkblue";
context.stroke();
// the fill color
context.fillStyle = "RoyalBlue";
context.fill();
//can top
context.beginPath();
context.arc(350, 485, 200, 1.35 * Math.PI, 1.65 * Math.PI, false);
context.arc(350, 133, 200, 0.35 * Math.PI, 0.65 * Math.PI, false);
context.closePath();
// the outline
context.lineWidth = 3;
context.strokeStyle = "darkblue";
context.stroke();
// the fill color
context.fillStyle = "LightSkyBlue";
context.fill();
</script>
</body>
</html>Is this something you need to be animated using then canvas, or would you be open to turning these shapes into SVG or PNG/image elements in the DOM and using CSS to animate the shapes?
I was trying to do it all in canvas using the html page only but open to using css and turning the shapes into image elements to animate…
That approach is much easier since you can use CSS animations and keyframes to precisely animate your content to where it needs to go
The advantage of canvas based animations is that you can animate a lot of items very performantly. The disadvantage is that they are more difficult to setup, for all of it has to be done in JavaScript using draw commands.
1 Like
