# Fill Triangle Block

**URL:** <https://forum.makecode.com/t/fill-triangle-block/5285>\
**Category:** Help\
**Created:** [December 31, 2020, 8:24pm UTC](https://forum.makecode.com/t/fill-triangle-block/5285 "2020-12-31T20:24:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [December 31, 2020, 8:24pm UTC](https://forum.makecode.com/t/fill-triangle-block/5285/1 "2020-12-31T20:24:38Z")

</div>

How can I create a function to draw a triangle on an image then fill it?

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [December 31, 2020, 8:30pm UTC](https://forum.makecode.com/t/fill-triangle-block/5285/2 "2020-12-31T20:30:05Z")

</div>

Ah, this is actually a pretty difficult task! You’ll want to look up a “triangle rasterization” algorithm

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [December 31, 2020, 10:23pm UTC](https://forum.makecode.com/t/fill-triangle-block/5285/3 "2020-12-31T22:23:50Z")

</div>

Would a right triangle be easier?

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [December 31, 2020, 10:44pm UTC](https://forum.makecode.com/t/fill-triangle-block/5285/4 "2020-12-31T22:44:30Z")

</div>

Yes, if the triangle is half of an unrotated rectangle. Off the top of my head, it would probably look something like this:

1. Figure out which two points form the hypotenuse (it’ll be the two points that do not share an x or a y value)
2. Use the [bresenham line algorithm](https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm) to draw the line between those two points
3. At the point in that algorithm where you set the pixel, instead draw a vertical line. The line should start at the pixel position and go vertically to the y of the third (non-hypotenuse) point

There’s probably a smarter way to do it but that’s what i’ve got!

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [December 31, 2020, 10:49pm UTC](https://forum.makecode.com/t/fill-triangle-block/5285/5 "2020-12-31T22:49:44Z")

</div>

Here’s an implementation that uses that algorithm:

> **[draw-right-triangle](https://arcade.makecode.com/70677-10146-62169-10831)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

Note that this does not actually check that the three points _are_ a right triangle, I’ll leave that to you

Also this doesn’t work for rotated triangles!