# Help with drawing

**URL:** <https://forum.makecode.com/t/help-with-drawing/45813>\
**Category:** Show & Tell\
**Tags:** extension\
**Created:** [September 9, 2026, 6:49pm UTC](https://forum.makecode.com/t/help-with-drawing/45813 "2026-09-09T18:49:00Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cybercube](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/cybercube/32/34628_2.png) [@Cybercube](https://forum.makecode.com/u/Cybercube)\
**Post date:** [September 9, 2026, 6:49pm UTC](https://forum.makecode.com/t/help-with-drawing/45813/1 "2026-09-09T18:49:00Z")

</div>

So, I was making a script to draw a rounded rectangle, but when you put Hight and width to 0 and smoothness to 30 it shows a circle insead.

Here the code:

```auto
//% block="draw rounded rectangle at $img|x: $x|y: $y|width: $width|height: $height|smoothness: $smooth| color: $c"
    //% c.shadow="colorindexpicker"
    //% inlineInputMode=inline
    //% subcategory="Image"
    //% img.defl=picture
    //% img.shadow=variables_get
    export function RoundedRectangle(img: Image, x: number, y: number, width: number, height: number, smooth: number, c: number) {
        for (let index = 0; index <= 360; index++) {
            img.fillRect(x + Math.sin(index) * smooth, y + Math.cos(index) * smooth, width, height, c)
        }
        img.fillRect(x, y, width, height, c)
    }

```

---

<div class="post-metadata">

**Author:** ![ShadowWhisker](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/shadowwhisker/32/35148_2.png) [@ShadowWhisker](https://forum.makecode.com/u/ShadowWhisker)\
**Post date:** [September 9, 2026, 10:47pm UTC](https://forum.makecode.com/t/help-with-drawing/45813/2 "2026-09-09T22:47:06Z")

</div>

If you use blocks then drawing is a LOT easier

---

<div class="post-metadata">

**Author:** ![Sword\_Studios](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sword_studios/32/35216_2.png) [@Sword\_Studios](https://forum.makecode.com/u/Sword_Studios)\
**Post date:** [September 9, 2026, 10:51pm UTC](https://forum.makecode.com/t/help-with-drawing/45813/3 "2026-09-09T22:51:20Z")

</div>

Yes, when you’re drawing a sprite, but I think drawing a rounded rectangle (what @Cybercube is trying to draw) is easier in Java?

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [September 10, 2026, 3:27am UTC](https://forum.makecode.com/t/help-with-drawing/45813/4 "2026-09-10T03:27:05Z")

</div>

```typescript
    //% block="draw rounded rectangle at $img|x: $x|y: $y|width: $width|height: $height|smoothness: $smooth| color: $c"
    //% c.shadow="colorindexpicker"
    //% inlineInputMode=inline
    //% subcategory="Image"
    //% img.defl=picture
    //% img.shadow=variables_get
export function RoundedRectangle(img: Image, x: number, y: number, width: number, height: number, smooth: number, c: number) {
    // Prevent the smoothness radius from breaking if it's larger than the shape itself
    smooth = Math.min(smooth, Math.min(width / 2, height / 2));
    if (smooth < 0) smooth = 0;

    // Draw the central rectangles
    img.fillRect(x + smooth, y, width - 2 * smooth, height, c);
    img.fillRect(x, y + smooth, width, height - 2 * smooth, c);

    // Stamp the 4 corner circles
    if (smooth > 0) {
        img.fillCircle(x + smooth, y + smooth, smooth, c)
        img.fillCircle(x + width - smooth - 1, y + smooth, smooth, c)
        img.fillCircle(x + smooth, y + height - smooth - 1, smooth, c)
        img.fillCircle(x + width - smooth - 1, y + height - smooth - 1, smooth, c)
    }
}

```

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [September 12, 2026, 3:37am UTC](https://forum.makecode.com/t/help-with-drawing/45813/5 "2026-09-12T03:37:27Z")

</div>

it’s actually harder since there’s a drawRectangle already in there, also it’s javascript.

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [September 12, 2026, 3:37am UTC](https://forum.makecode.com/t/help-with-drawing/45813/6 "2026-09-12T03:37:37Z")

</div>

there’s actually more drawing functions in Javascript, also in my POV js is easier in almost anything.

---

<div class="post-metadata">

**Author:** ![kirbob](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kirbob/32/34880_2.png) [@kirbob](https://forum.makecode.com/u/kirbob)\
**Post date:** [September 12, 2026, 6:32pm UTC](https://forum.makecode.com/t/help-with-drawing/45813/7 "2026-09-12T18:32:49Z")

</div>

yeah but like u know how to like use it while mine looks like this

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/a/5/a58f96b87aa500e2c0165a0f32432fd9fd1b2879.png)

---

<div class="post-metadata">

**Author:** ![TheEarth](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/theearth/32/34579_2.png) [@TheEarth](https://forum.makecode.com/u/TheEarth)\
**Post date:** [September 12, 2026, 6:35pm UTC](https://forum.makecode.com/t/help-with-drawing/45813/8 "2026-09-12T18:35:38Z")

</div>

Easier to understand spaghetti code??? There’s no way that’s easier

---

<div class="post-metadata">

**Author:** ![Sword\_Studios](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sword_studios/32/35216_2.png) [@Sword\_Studios](https://forum.makecode.com/u/Sword_Studios)\
**Post date:** [September 12, 2026, 6:39pm UTC](https://forum.makecode.com/t/help-with-drawing/45813/9 "2026-09-12T18:39:12Z")

</div>

Oh ok thanks for clearing that up

---

<div class="post-metadata">

**Author:** ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)\
**Post date:** [September 12, 2026, 11:52pm UTC](https://forum.makecode.com/t/help-with-drawing/45813/10 "2026-09-12T23:52:00Z")

</div>

in blocks, comments are weird and I cant separate my lines with more empty lines

---

<div class="post-metadata">

**Author:** ![TheEarth](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/theearth/32/34579_2.png) [@TheEarth](https://forum.makecode.com/u/TheEarth)\
**Post date:** [September 13, 2026, 7:15pm UTC](https://forum.makecode.com/t/help-with-drawing/45813/11 "2026-09-13T19:15:32Z")

</div>

I mean I remembered a time where you could use grey blocks to get a similar effect