Anissa was here: MS Paint widget

I’ve been seeing this cutie in almost every girl blog I visit. And the reason is clear: look how adorable it is!!

This is the original version, hosted by its creators on GitHub. You can put it in your blog by simply copying this code into a HTML/Javascript gadget on your Layout page. (Funny drawing not included.)

<iframe height="270px" src="https://jspaint.app/" title="MS Paint Widget" width="250px"></iframe>

Like any millennial, I was raised by MS Paint, so this one hits especially hard. However, I did notice that the application only supports the classic gray-scale theme and a couple others that I didn’t really love. (The bubblegum theme is so cute, but it completely wrecks the nostalgia, imo). I was missing something pink and girly and Pinteresty—so I took it upon myself to host a custom GIRLY version!

Pink is the default, but you can go to Extras → Themes for other options (so far I’ve included purple, yellow and brown, but I plan to expand it in the future). Help yourself to Pink Paint here:

<iframe height="270px" src="https://anissabzrr.github.io/pink-paint/" title="Pink MS Paint Widget" width="250px"></iframe>

Alternatively, you can access the full-screen app here if you need more space to mess around. Which I very much encourage you to do, because this version of Paint is so superior to the clown show that Microsoft currently has running. The people who contributed to the code have included all sorts of cool functions, and everything is open-source! Communal internet is the best internet. 💖

But wait, just one more!

A simpler (much less drawing features), but no less cute option was vibe-coded by Spectrum Momi, and it looks like this:

You can get the original code in her blog, which you should visit anyway, it’s super pretty! But being the pink-obsessed girly girl I am, of course I had to make a pink version of this one too. Try it out:

<div class="momi-paint-widget-left">
  
  <div class="paint-window-bar">
    <span class="paint-title">🎨 untitled - Pink Paint</span>
    <div class="paint-window-controls">
      <span class="paint-btn-mini">_</span>
      <span class="paint-btn-mini">✕</span>
    </div>
  </div>

<div class="paint-menu-bar">
    <span>File</span><span>Edit</span><span>View</span><span onclick="clearCanvas()" class="clear-menu-btn">Clear</span>
  </div>

<div class="paint-footer-palette">
    
    <div class="selected-indicator-box">
      <div id="momiCurrentColorPreview" style="background: #000000;"></div>
    </div>
    
    
    <div class="colors-grid-container">
      
<div class="color-pixel" style="background: #6f5f68;" onclick="selectPaintColor('#6f5f68')"></div>
<div class="color-pixel" style="background: #a99ca3;" onclick="selectPaintColor('#a99ca3')"></div>
<div class="color-pixel" style="background: #c98f9c;" onclick="selectPaintColor('#c98f9c')"></div>
<div class="color-pixel" style="background: #cbb58a;" onclick="selectPaintColor('#cbb58a')"></div>
<div class="color-pixel" style="background: #98b99a;" onclick="selectPaintColor('#98b99a')"></div>
<div class="color-pixel" style="background: #8fb9b5;" onclick="selectPaintColor('#8fb9b5')"></div>
<div class="color-pixel" style="background: #8fa4c9;" onclick="selectPaintColor('#8fa4c9')"></div>
<div class="color-pixel" style="background: #b18fbf;" onclick="selectPaintColor('#b18fbf')"></div>
<div class="color-pixel" style="background: #b8b48a;" onclick="selectPaintColor('#b8b48a')"></div>
<div class="color-pixel" style="background: #7fa7a0;" onclick="selectPaintColor('#7fa7a0')"></div>
<div class="color-pixel" style="background: #8fc4e8;" onclick="selectPaintColor('#8fc4e8')"></div>
<div class="color-pixel" style="background: #8da7c2;" onclick="selectPaintColor('#8da7c2')"></div>
<div class="color-pixel" style="background: #a78ec4;" onclick="selectPaintColor('#a78ec4')"></div>
<div class="color-pixel" style="background: #b69478;" onclick="selectPaintColor('#b69478')"></div>

<div class="color-pixel" style="background: #fffafc;" onclick="selectPaintColor('#fffafc')"></div>
<div class="color-pixel" style="background: #e2dadd;" onclick="selectPaintColor('#e2dadd')"></div>
<div class="color-pixel" style="background: #f3a1aa;" onclick="selectPaintColor('#f3a1aa')"></div>
<div class="color-pixel" style="background: #f5df9d;" onclick="selectPaintColor('#f5df9d')"></div>
<div class="color-pixel" style="background: #b9dfb0;" onclick="selectPaintColor('#b9dfb0')"></div>
<div class="color-pixel" style="background: #b7e5df;" onclick="selectPaintColor('#b7e5df')"></div>
<div class="color-pixel" style="background: #a9c7ee;" onclick="selectPaintColor('#a9c7ee')"></div>
<div class="color-pixel" style="background: #e5b0de;" onclick="selectPaintColor('#e5b0de')"></div>
<div class="color-pixel" style="background: #fff1ad;" onclick="selectPaintColor('#fff1ad')"></div>
<div class="color-pixel" style="background: #bce8c6;" onclick="selectPaintColor('#bce8c6')"></div>
<div class="color-pixel" style="background: #d5f0f2;" onclick="selectPaintColor('#d5f0f2')"></div>
<div class="color-pixel" style="background: #c7cff7;" onclick="selectPaintColor('#c7cff7')"></div>
<div class="color-pixel" style="background: #f5c0aa;" onclick="selectPaintColor('#f5c0aa')"></div>
<div class="color-pixel" style="background: #f6b8cf;" onclick="selectPaintColor('#f6b8cf')"></div>
    </div>
  </div>
</div>

.momi-paint-widget-left .paint-window-bar {
  background: #e94f8a;
  padding: 3px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.momi-paint-widget-left .paint-title {
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
}

.momi-paint-widget-left .paint-window-controls {
  display: flex;
  gap: 2px;
}

.momi-paint-widget-left .paint-btn-mini {
  background: #f7b6cf;
  border-top: 1px solid #ffeaf3;
  border-left: 1px solid #ffeaf3;
  border-right: 1px solid #a94d72;
  border-bottom: 1px solid #a94d72;
  font-size: 9px;
  padding: 0px 4px;
  color: #7d294c;
  font-weight: bold;
}

.momi-paint-widget-left .paint-menu-bar {
  display: flex;
  gap: 8px;
  padding: 3px 4px;
  font-size: 11px;
  color: #6f2948;
  background: #f7b6cf;
  border-bottom: 1px solid #c86b91;
}

.momi-paint-widget-left .clear-menu-btn {
  color: #d72d70;
  font-weight: bold;
  cursor: pointer;
  text-decoration: underline;
}

.momi-paint-widget-left .paint-body {
  background: #d985a8;
  padding: 3px;
  display: flex;
  justify-content: center;
}

.momi-paint-widget-left canvas {
  background: #ffffff;
  border-top: 2px solid #9f4569;
  border-left: 2px solid #9f4569;
  border-bottom: 2px solid #ffeaf3;
  border-right: 2px solid #ffeaf3;
  display: block;
  cursor: crosshair;
}

.momi-paint-widget-left .paint-footer-palette {
  display: flex;
  align-items: center;
  padding: 5px;
  background: #f7b6cf;
  gap: 6px;
  border-top: 1px solid #c86b91;
}

.momi-paint-widget-left .selected-indicator-box {
  width: 28px;
  height: 28px;
  background: #f3a7c5;
  border-top: 2px solid #9f4569;
  border-left: 2px solid #9f4569;
  border-bottom: 2px solid #ffeaf3;
  border-right: 2px solid #ffeaf3;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.momi-paint-widget-left #momiCurrentColorPreview {
  width: 14px;
  height: 14px;
  border: 1px solid #6f2948;
}

.momi-paint-widget-left .colors-grid-container {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 1px;
  flex-grow: 1;
}

.momi-paint-widget-left .color-pixel {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-top: 1px solid #8e3b5d;
  border-left: 1px solid #8e3b5d;
  border-bottom: 1px solid #ffeaf3;
  border-right: 1px solid #ffeaf3;
  cursor: pointer;
}
</style>

ctx.lineCap = 'round';
  ctx.lineJoin = 'round';

function startPosition(e) {
    painting = true;
    draw(e);
  }

function endPosition() {
    painting = false;
    ctx.beginPath();
  }

function draw(e) {
    if (!painting) return;
    const rect = canvas.getBoundingClientRect();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const clientY = e.touches ? e.touches[0].clientY : e.clientY;

ctx.lineWidth = brushSize;
    ctx.strokeStyle = currentColor;

ctx.lineTo(clientX - rect.left, clientY - rect.top);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(clientX - rect.left, clientY - rect.top);
  }

canvas.addEventListener('mousedown', startPosition);
  canvas.addEventListener('mouseup', endPosition);
  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseleave', endPosition);

canvas.addEventListener('touchstart', (e) => { e.preventDefault(); startPosition(e); });
  canvas.addEventListener('touchend', endPosition);
  canvas.addEventListener('touchmove', (e) => { e.preventDefault(); draw(e); });

window.selectPaintColor = function(color) {
    currentColor = color;
    colorPreview.style.background = color;
    brushSize = (color === '#ffffff') ? 12 : 3;
  };

window.clearCanvas = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  };
});
  </script>

blog pages

Tuesday, August 25, 2026

MS Paint widget

No comments:

Penny for your thoughts?

The quick brown fox jumps over the lazy dog!?