Moving drawn ctx image

JavaScript
1

Hi all,

So in my game i have managed to get a square to move around however i want it to be a triangle and in future make other shapes

to do this it was simple and used

	myGamePiece = new component (10,10, "blue",230,140);

and then gave it commands and manipulate
but how do i assign a triangle?
i can draw this image on canvas like so

		ctx.beginPath();
		ctx.moveTo(50,50);
		ctx.lineTo(100, 70);
		ctx.lineTo(100, 30);
		ctx.fill

how do i make this into a component or assign it to a value?
I hope i have explained it well enough

thanks

2

Hello there,

I am not entirely sure what you are wanting, but I can see this being made DRYer in two ways:

  1. Create classes of your shapes, extending the relatable shapes to not have to repeat yourself as much.
  2. Create a function which accepts an array of (x, y) coordinates, and draws these.

Examples of 1 are all over the internet. An example of how 2 could work would be:

function drawShape(start, end, arr) {
  ctx.beginPath();
  ctx.moveTo(start, end);
  for (let i = 0; i < arr.length; i+=2) {
    ctx.lineTo(arr[i], arr[i+1]);
  }
  ctx.fill();
}
const square = drawShape(50, 50, [70, 50, 70, 70, 50, 70]);
const triangle = drawShape(50, 50, [100, 70, 100, 30]);

Please note: I have not tested the above code at all. So, use it as sudo-code.

Otherwise, this is where you can think about optimisations (nice-to-look-at) in the code:

  • Should the array coordinates be relative to the start, end arguments?
  • Should the array contain objects of {x, y}
  • Should you pass ctx as an argument

Hope this helps

3

I could not leave that like that. So, here is a mock-up: https://codepen.io/sky020/pen/ZEWqVzy?editors=0010

I challenge you to find a way to nicely integrate circles and other curved paths into the function.

4

Wow Sky this is awesome thanks for the tips, i have a bit of homework to do as i find it hard to understand what you have written but it looks awesome. as to your challenge ill see what i can do!!

thanks bro

5

sorry it may seem straight forward but you know where you have

const triangle = drawShape(ctx, 100, 50, [100, 0, 100, 30], true);

im struggling to find how you have done that when looking at drawing an object i seem to have to draw point by point and fill like my above code, however it looks like you have managed to do that using a draw shape command with an array?

6

My code is very similar to yours. For example, to draw the exact same triangle you have, I would use:

drawShape(ctx, 50, 50, [100, 70, 100, 30], false);
// This is the same as:
drawShape(ctx, 50, 50, [50, 20, 50, -20]);

I am not sure where the confusion is, because our code really is quite similar. All I have done is as I mentioned in my first reply:

  • Create a function (I named it drawShape) which accepts 4 or 5 arguments:
    1. The context for where to draw
    1. The starting x location on the canvas
    1. The starting y location on the canvas
    1. An array of (x, y) coordinates (that is why there is always an even number of points in the array.
    1. A boolean telling the function to either draw the points relative to the starting values, or to draw them relative to the canvas.

The main feature of the drawShape function is instead of having to rewrite ctx.lineTo(x, y) many many times (some shapes would require hundreds - see the circle), the function has a for loop to take values from the array, and populate ctx.lineTo(x, y) as many times as needed.

Hope this clarifies