# ARCANE DRAWINGS. (A actual working painting game) \[COMPUTER ONLY\]

**URL:** <https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211>\
**Category:** Show & Tell\
**Tags:** game, art\
**Created:** [April 9, 2026, 2:04am UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211 "2026-04-09T02:04:52Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Log](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/log/32/30691_2.png) [@Log](https://forum.makecode.com/u/Log)\
**Post date:** [April 9, 2026, 2:04am UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/1 "2026-04-09T02:04:52Z")

</div>

_ **Hello!** _ This is a drawing game where you can draw anything! But unlike other ones made, this one is actually _ **quality with reliable controls** _. Just click and move your mouse! I hope you guys enjoy, This will hopefully be expanded on with more features and options!

> **[Arcane Drawings. (COMPUTER SUPPORT ONLY!!!)](https://arcade.makecode.com/S90821-20084-79741-54382)**
>
> USE YOUR MOUSE TO CLICK, INTERACT AND DRAW!!!
> 
> Unfortunately you cannot save or load any of your drawings due to no extensions existing of such things. Though everything this else is interactable by hovering your mouse over it and clicking it!!!

**Please do not misuse this game to make innapropriate drawings/art or anything bad in general!!! I strictly ask EVERYONE to follow this!!!** If anyone has any questions, suggestions or bug reports, _please don’t hesitate to reply to this topic and @ me!_

---

<div class="post-metadata">

**Author:** ![xInsqne1](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/xinsqne1/32/34060_2.png) [@xInsqne1](https://forum.makecode.com/u/xInsqne1)\
**Post date:** [April 9, 2026, 4:22pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/2 "2026-04-09T16:22:04Z")

</div>

There is a bit of a glitch when you have your mouse go to the edge of the screen. It does dots of gray and whatever color I was using. Dont know if thats intentional or not?

---

<div class="post-metadata">

**Author:** ![Player\_246](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/player_246/32/35905_2.png) [@Player\_246](https://forum.makecode.com/u/Player_246)\
**Post date:** [April 9, 2026, 4:22pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/3 "2026-04-09T16:22:18Z")

</div>

@Log This game is actually really good I have never seen a drawing simulation like this before.

I do have a suggestion, maybe add different drawing materials like chalk, marker, crayon, that stuff. (sounds a little hard though…)

---

<div class="post-metadata">

**Author:** ![NeverStopTheCoder](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/neverstopthecoder/32/21194_2.png) [@NeverStopTheCoder](https://forum.makecode.com/u/NeverStopTheCoder)\
**Post date:** [April 9, 2026, 4:24pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/4 "2026-04-09T16:24:26Z")

</div>

so check this out **[Breaking Makecode! [Contest] [Badges]](https://forum.makecode.com/t/breaking-makecode-contest-badges/42563)**

but

**Congratulations You Have Now Won A**

[![Screenshot 2026-03-07 11.34.03 AM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/2/9/2906442835214524a11dc233160545fdd150230e.png)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/2/9/2906442835214524a11dc233160545fdd150230e.png "Screenshot 2026-03-07 11.34.03 AM")

**1st Place Badge in the Art Redesigned Section Section**

Note: more than one person can have the same badge in the same section its more like 1st place is just a ranking like alright like 100% or 100 points

---

<div class="post-metadata">

**Author:** ![The4Lexanator](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/the4lexanator/32/32913_2.png) [@The4Lexanator](https://forum.makecode.com/u/The4Lexanator)\
**Post date:** [April 9, 2026, 4:26pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/5 "2026-04-09T16:26:27Z")

</div>

Wow this game/app is so cool, there is 1 thing that i would like to have in this game/app is that you would make it so that even if you draw or hold left mouse and drag very fast it still makes a normal line instead of a few pixels just there @Log

---

<div class="post-metadata">

**Author:** ![Log](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/log/32/30691_2.png) [@Log](https://forum.makecode.com/u/Log)\
**Post date:** [April 9, 2026, 4:27pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/6 "2026-04-09T16:27:42Z")

</div>

I’ve actually notice that myself and I plan to find a fix soon, thanks for letting me know 😃

---

<div class="post-metadata">

**Author:** ![Log](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/log/32/30691_2.png) [@Log](https://forum.makecode.com/u/Log)\
**Post date:** [April 9, 2026, 4:27pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/7 "2026-04-09T16:27:52Z")

</div>

I plan to try and do that at a later date, right now I’m focusing on trying to get saving art and loading art to function. I’ve looked at every existing extension on the forums and none of them do what I need sadly.

---

<div class="post-metadata">

**Author:** ![Log](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/log/32/30691_2.png) [@Log](https://forum.makecode.com/u/Log)\
**Post date:** [April 9, 2026, 4:36pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/8 "2026-04-09T16:36:18Z")

</div>

Sadly I don’t think that’s possible because the game simulator runs at a low framerate and gameupdates don’t happen often enough for that to happen

---

<div class="post-metadata">

**Author:** ![kwx](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kwx/32/1545_2.png) [@kwx](https://forum.makecode.com/u/kwx)\
**Post date:** [April 9, 2026, 5:33pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/9 "2026-04-09T17:33:21Z")

</div>

This is very cool, I didn’t know that it’s possible to make this kind of app in Arcade.

> Sadly I don’t think that’s possible because the game simulator runs at a low framerate and gameupdates don’t happen often enough for that to happen

To do that, you need to save the last cursor position, check how much the cursor moved between the last update and now, and draw the intermediate positions manually. Something like this:

> **[\[line mod\] Arcane Drawings. (COMPUTER SUPPORT ONLY!!!)](https://arcade.makecode.com/92747-54245-95819-36009)**
>
> USE YOUR MOUSE TO CLICK, INTERACT AND DRAW!!!
> 
> Unfortunately you cannot save or load any of your drawings due to no extensions existing of such things. Though everything this else is interactable by hovering your mouse over it and clicking it!!!

```auto
let lastCursorX = -1
let lastCursorY = -1
game.onUpdate(function () {
    if (Promptactive == 0) {
        if (mouse_helddown == 1) {
            if (lastCursorX >= 0) {
                let deltaX = cursor.x - lastCursorX
                let deltaY = cursor.y - lastCursorY
                let max = Math.max(Math.abs(deltaX), Math.abs(deltaY))
                let currX = cursor.x
                let currY = cursor.y

                for (let i = 0; i < max; ++i) {
                    cursor.x = lastCursorX + deltaX * i / max
                    cursor.y = lastCursorY + deltaY * i / max
                    spriteFx.stampToBackground(cursor)
                }

                cursor.x = currX
                cursor.y = currY
            }
            spriteFx.stampToBackground(cursor)
            lastCursorX = cursor.x
            lastCursorY = cursor.y
        } else {
            lastCursorX = -1
            lastCursorY = -1
        }
    } else {
    	lastCursorX = -1
        lastCursorY = -1
    }
})

```

Setting the lastCursorX position to -1 means the last position is invalid and it shouldn’t try to draw a connecting line. It would probably need to be set in additional places also, this was just a quick test.

---

<div class="post-metadata">

**Author:** ![Log](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/log/32/30691_2.png) [@Log](https://forum.makecode.com/u/Log)\
**Post date:** [April 9, 2026, 11:30pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/10 "2026-04-09T23:30:33Z")

</div>

Oh my god. Wow thank you so much!!! I’m still a bit new to makecode so I’ll experiment with this. But again thank you so much!!!

---

<div class="post-metadata">

**Author:** ![Log](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/log/32/30691_2.png) [@Log](https://forum.makecode.com/u/Log)\
**Post date:** [April 10, 2026, 5:16pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/11 "2026-04-10T17:16:53Z")

</div>

if you want to check it out again I just did a quick hotfix and added a contribution made by @kwx

---

<div class="post-metadata">

**Author:** ![Log](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/log/32/30691_2.png) [@Log](https://forum.makecode.com/u/Log)\
**Post date:** [April 10, 2026, 5:22pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/12 "2026-04-10T17:22:22Z")

</div>

Thank you for contributing to this project, since I had my day cut short I slapped your code on, made some changes and fixed bugs. I appreciate your help!!!

> **[Arcane Drawings. (COMPUTER SUPPORT ONLY!!!)](https://arcade.makecode.com/S90821-20084-79741-54382)**
>
> USE YOUR MOUSE TO CLICK, INTERACT AND DRAW!!!
> 
> Unfortunately you cannot save or load any of your drawings due to no extensions existing of such things. Though everything this else is interactable by hovering your mouse over it and clicking...

---

<div class="post-metadata">

**Author:** ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)\
**Post date:** [April 10, 2026, 5:51pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/13 "2026-04-10T17:51:30Z")

</div>

wowww this is so cool!! i love how precise everything is. I would love to see custom palettes involved, maybe you can type in a hex code or smthing and choose from presets

other really useful tools that i would love to see

- UNDO and redo
- Circular brush
- Left and Right click using 2 different colours (like makecode editor)
- Hotkey for colour picking
- Saving artworks to memory

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/9/2/92732f32329bc9dc7e7ca56724c19eb6015c71c7.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/6/a/6a4d1a4c4b1a167c2af8a50a5c2537f5d953775d.png)

tried to do a study of _Impression, Sunrise_ by Monet (didnt really capture the soft atmosphere well tho)

---

<div class="post-metadata">

**Author:** ![kwx](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kwx/32/1545_2.png) [@kwx](https://forum.makecode.com/u/kwx)\
**Post date:** [April 10, 2026, 5:53pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/14 "2026-04-10T17:53:24Z")

</div>

Sorry, the snippet I posting was drawing the first point twice, but I’m getting skipped points in your latest version when drawing fast lines. Try changing the loop to `for (let i = 1; i < max; i++)` instead.

`i==0` isn’t necessary since it’s the previously drawn point, and `i==max` will get drawn after the loop, but using `<= max-1` as the limit can cause issues due to rounding errors. For example if `max` is 1.999, looping to `<= max-1` won’t draw any points.

I just checked by adding a debug log, the incoming mouse data has floating point values:

```auto
console.log("currX=" + currX + " currY=" + currY + " deltaX=" + deltaX + " deltaY=" + deltaY + " max=" + max)

=>
currX=38.9921875 currY=43.83984375 deltaX=7.01953125 deltaY=13.50390625 max=13.50390625

```

---

<div class="post-metadata">

**Author:** ![kwx](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kwx/32/1545_2.png) [@kwx](https://forum.makecode.com/u/kwx)\
**Post date:** [April 10, 2026, 11:20pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/15 "2026-04-10T23:20:46Z")

</div>

@Luke, that is great pixel art!

I got nerdsniped into making the palette editable:

> **[\[Mod: color edit\] Arcane Drawings. (COMPUTER SUPPORT ONLY!!!)](https://arcade.makecode.com/S97668-94028-11138-86979)**
>
> While hovering over a color selector, use the mouse wheel to change the current color component, and right button to cycle which component is being edited (red, green, blue, and then back to red). ("erase" isn't editable.)

```auto
let editedComponent = 0
let startingPalette: Buffer = hex`000000FFFFFFFF2121FF93C4FF8135FFF609249CA378DC52003FAD87F2FF8E2EC4A1A1A15C406CE5CDC491463D000000`
let palBuf: Buffer = Buffer.create(48)
for (let i = 0; i < 48; ++i) {
    palBuf.setUint8(i, startingPalette.getUint8(i))
}
function changeColor(col: number, dy: number) {
    let val = palBuf.getUint8(col * 3 + editedComponent)
    if (dy < 0) val = Math.max(0, val - 17)
    if (dy > 0) val = Math.min(255, val + 17)
    palBuf.setUint8(col * 3 + editedComponent, val)
    image.setPalette(palBuf)
}
browserEvents.onWheel(function(dx: number, dy: number, dz: number) {
    if (cursor.overlapsWith(erase)) {
        // Un-editable to avoid messing up the UI?
        // changeColor(1, dy)
    }
    if (cursor.overlapsWith(red)) {
        changeColor(2, dy)
    }
    // [... see the app link for the full list ...]
    if (cursor.overlapsWith(black)) {
        changeColor(15, dy)
    }
})
browserEvents.MouseRight.onEvent(browserEvents.MouseButtonEvent.Pressed, function(x, y) {
    editedComponent = (editedComponent + 1) % 3
})

```

The startingPalette hex string contains the original custom color palette (see [https://arcade.makecode.com/developer/images](https://arcade.makecode.com/developer/images)). It makes a writable copy of it, and then modifies that in the mouse event handlers.

@Log, feel free to use any of that in case you’re interested. Let me know if you have questions about it.

---

<div class="post-metadata">

**Author:** ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)\
**Post date:** [April 11, 2026, 7:12pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/16 "2026-04-11T19:12:04Z")

</div>

thats so cool! however, for artists its far more intuitive to use the HSV colour format as picking colours on RGB balance is tricky. Mixing light is not something we really do compared to mixing pigments.

---

<div class="post-metadata">

**Author:** ![CodingGrizzlyBear](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/codinggrizzlybear/32/14838_2.png) [@CodingGrizzlyBear](https://forum.makecode.com/u/CodingGrizzlyBear)\
**Post date:** [April 12, 2026, 3:06am UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/17 "2026-04-12T03:06:57Z")

</div>

Saving and loading is possible with better settings extension by `@Sarge`

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/f/d/fdce7ca63c27173c7df3d3dfbf366c3a7b5a1ef2.png)

---

<div class="post-metadata">

**Author:** ![Log](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/log/32/30691_2.png) [@Log](https://forum.makecode.com/u/Log)\
**Post date:** [April 13, 2026, 5:29pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/18 "2026-04-13T17:29:03Z")

</div>

Ive tried using that before but I couldn’t seem to figure out how to get it to work as I was getting a stream of errors lol. I’ve taken the past couple days off of development but I plan to continue working on it soon!

---

<div class="post-metadata">

**Author:** ![Log](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/log/32/30691_2.png) [@Log](https://forum.makecode.com/u/Log)\
**Post date:** [April 13, 2026, 6:14pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/19 "2026-04-13T18:14:06Z")

</div>

Thats actually insane artwork!!! I’m not sure how I would be able to implement Hex code into this project but I’ll see if I can modify the mod that @kwx made. Sadly I’m using a school chromebook for this so I don’t exactly have a scroll wheel but I will try to add your suggestion to the best of my ability!

---

<div class="post-metadata">

**Author:** ![Player\_246](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/player_246/32/35905_2.png) [@Player\_246](https://forum.makecode.com/u/Player_246)\
**Post date:** [April 13, 2026, 11:30pm UTC](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211/20 "2026-04-13T23:30:39Z")

</div>

Even if you didn’t get the soft atmosphere, it’s really good as you just did it from the arcade colour pallete

[Next page](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211.md?page=2)