# Help with shadow block

**URL:** <https://forum.makecode.com/t/help-with-shadow-block/45902>\
**Category:** Help\
**Tags:** extension, art\
**Created:** [September 15, 2026, 2:59am UTC](https://forum.makecode.com/t/help-with-shadow-block/45902 "2026-09-15T02:59:06Z")\
**Posts on this page:** 10\
**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 15, 2026, 2:59am UTC](https://forum.makecode.com/t/help-with-shadow-block/45902/1 "2026-09-15T02:59:06Z")

</div>

So, I was making a block for image shadow but if you type a input higher than 90, the code crops the image and still scale the sprite size.  
Here’s the code:

```auto
   //% block="shadow $img|with color: $c|length: $leng|rotation: $rot"
    //% c.shadow="colorindexpicker"
    //% inlineInputMode=inline
    //% subcategory="Image"
    //% img.shadow="screen_image_picker"
    //% subcategory="Image"
    export function shadow(img: Image, c: number, leng: number, rot: number) {
        let picture = image.create(image.getDimension(img, image.Dimension.Width) + (leng + 1), image.getDimension(img, image.Dimension.Height) + (leng + 1))
        let clone = img.clone()
    for (let index = 0; index <= leng; index++) {
        picture.drawTransparentImage(CyberScripts.OneColorImage(img, c), index * Math.sin(rot * (Math.PI / 180)), index * Math.cos(rot * (Math.PI / 180)))
    }
    picture.drawTransparentImage(clone, 0, 0)
    return picture
    }

```

---

<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 15, 2026, 10:30pm UTC](https://forum.makecode.com/t/help-with-shadow-block/45902/2 "2026-09-15T22:30:24Z")

</div>

Im afraid i can only really help if its in blocks, i am bad at 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 15, 2026, 10:30pm UTC](https://forum.makecode.com/t/help-with-shadow-block/45902/3 "2026-09-15T22:30:27Z")

</div>

you have:  
_//% subcategory=“Image”_  
in there twice

but other than that idk

---

<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 15, 2026, 10:30pm UTC](https://forum.makecode.com/t/help-with-shadow-block/45902/4 "2026-09-15T22:30:53Z")

</div>

Im not sure. I tried this:

```typescript
    //% block="shadow $img|with color: $c|length: $leng|rotation: $rot"
    //% c.shadow="colorindexpicker"
    //% inlineInputMode=inline
    //% subcategory="Image"
    //% img.shadow="screen_image_picker"
    export function shadow(img: Image, c: number, size: number, rot: number) {
        rot = ((rot % 360) + 360) % 360
        const r = Math.PI * (rot / 180)
        const sin = Math.sin(r), cos = Math.cos(r)

        const picture = image.create(
            img.width + Math.abs(sin * size) | 0,
            img.height + Math.abs(cos * size) | 0
        )

        const im = OneColorImage(img, c)

        let stepX = sin, stepY = cos
        for (let i = 0; i < size; i++) {
            picture.drawTransparentImage(im, stepX | 0, stepY | 0)
            stepX += sin
            stepY += cos
        }

        const index = (rot / 90) | 0
        const offsetX = picture.width - img.width
        const offsetY = picture.height - img.height

        const xPos = [0, 0, offsetX, offsetX][index] || 0
        const yPos = [offsetY, 0, 0, offsetY][index] || 0

        picture.drawTransparentImage(img, xPos, yPos)
        return picture
    }

```

but it didn’t look right (when I used it).

---

<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 16, 2026, 7:30pm UTC](https://forum.makecode.com/t/help-with-shadow-block/45902/5 "2026-09-16T19:30:48Z")

</div>

asked Gemini, this works:

```typescript
function OneColorImage(src: Image, color: number): Image {
    const result = src.clone()
    for (let c = 1; c <= 15; c++) result.replace(c, color)
    return result
}

// vvv FUNCTION HERE vvv 
function createDropShadow(img: Image, color: number, offset: number, angleDeg: number): Image {
    if (offset <= 0) return img.clone()

    const rad = (angleDeg * Math.PI) / 180
    const totalShiftX = Math.cos(rad) * offset
    const totalShiftY = Math.sin(rad) * offset

    const padX = Math.ceil(Math.abs(totalShiftX))
    const padY = Math.ceil(Math.abs(totalShiftY))

    const canvas = image.create(
        img.width + padX,
        img.height + padY
    )

    // Calculate original image offset so it stays in bounds
    const origX = totalShiftX < 0 ? padX : 0
    const origY = totalShiftY < 0 ? padY : 0

    const shadowImg = OneColorImage(img, color)

    // Interpolate shadow steps outwards from original image position
    for (let i = 1; i <= offset; i++) {
        const stepX = origX + (totalShiftX * (i / offset))
        const stepY = origY + (totalShiftY * (i / offset))
        canvas.drawTransparentImage(shadowImg, Math.round(stepX), Math.round(stepY))
    }

    // Draw the source image on top
    canvas.drawTransparentImage(img, origX, origY)
    return canvas
}
// ^^^ FUNCTION HERE ^^^

const sourceImage = assets.image`pizza with hole`

let shadowDistance = 0
let shadowAngle = 45
let cachedRender: Image = sourceImage
let needsUpdate = true

controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    shadowDistance++
    needsUpdate = true
})

controller.B.onEvent(ControllerButtonEvent.Pressed, function () {
    shadowDistance = Math.max(shadowDistance - 1, 0)
    needsUpdate = true
})

game.onUpdate(function () {
    if (controller.left.isPressed()) {
        shadowAngle -= 2
        needsUpdate = true
    }
    if (controller.right.isPressed()) {
        shadowAngle += 2
        needsUpdate = true
    }

    if (needsUpdate) {
        cachedRender = createDropShadow(sourceImage, 4, shadowDistance, shadowAngle)
        needsUpdate = false
    }
})

game.onPaint(function () {
    const drawX = 80 - (cachedRender.width >> 1)
    const drawY = 60 - (cachedRender.height >> 1)
    screen.drawTransparentImage(cachedRender, drawX, drawY)
})

```

---

<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 21, 2026, 10:21pm UTC](https://forum.makecode.com/t/help-with-shadow-block/45902/6 "2026-09-21T22:21:31Z")

</div>

but i want to be assessable to all images

---

<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 22, 2026, 3:16am UTC](https://forum.makecode.com/t/help-with-shadow-block/45902/7 "2026-09-22T03:16:42Z")

</div>

what do you mean? I’m not understanding.

---

<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 22, 2026, 6:05pm UTC](https://forum.makecode.com/t/help-with-shadow-block/45902/8 "2026-09-22T18:05:59Z")

</div>

i want to be used to all images

---

<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 22, 2026, 10:44pm UTC](https://forum.makecode.com/t/help-with-shadow-block/45902/9 "2026-09-22T22:44:16Z")

</div>

do you mean make your own images? You should need to change the //% lines a little, but this works fine:

> **[f](https://arcade.makecode.com/S14126-39955-94320-67801)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

(they are in a DELEYE.ts file)

---

<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 24, 2026, 3:14am UTC](https://forum.makecode.com/t/help-with-shadow-block/45902/10 "2026-09-24T03:14:30Z")

</div>

it dident work with multiple colors