# Moving drawn ctx image

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

Hello there,

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

1. Create `class`es 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

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.

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

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?

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