1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important; height: 469px !important;" horizontalscrolling="no" verticalscrolling="no">Pixel art</a>, as it is known today, goes back at least as far as 1972 when Richard Shoup wrote SuperPaint and with the Xerox PARC software. However, the concept of pixel art may go back thousands of years with traditional art forms such as cross-stitching (or more generally, <a href="https://en.wikipedia.org/wiki/Counted-thread_embroidery">counted-thread embroidery</a>) which uses small units which can be filled with thread to create a pattern or “drawing” of sorts. The painting style known as "<a href="https://en.wikipedia.org/wiki/Pointillism">pointillism</a>" is also very similar to pixel art.</p> <p>Pixel images were originally the only type of image which could be displayed on computers due to resolution constraints. Their colour values were also restricted to a small subset of the colours used on computers today. After black and white came 8-bit colour, leading to the distinctive 8-bit pixel art that we know today. Due to these constraints, all early <a href="https://en.wikipedia.org/wiki/Video_games">computer games</a> had to use pixel art for their visual elements. Of course, as screen resolution increased and computing power became better, the pixellated quality of game art assets became less visible.</p> <p>Presently, there are still many games which employ a pixel art style. These are usually indie games, or games where a pixel art style makes the game more visually appealing. People who draw and paint pixel art are (predictably) called <a href="https://en.wikipedia.org/wiki/Pixel_artist">pixel artists</a>.</p> <p>Professional pixel artists generally use expensive software like Adobe Photoshop to create their art and sprites, but of course, this is not necessary for a beginner. Online pixel art apps like this one allow you to create pixel art on a simple grid and instantly share it with friends.</p> <h2>Pixel Art Creators</h2> <p>This app is built for beginners who want to learn to create pixel art, but don’t know where to start. I hope the controls are intuitive and simple, and I hope that it helps you create images which you can be proud of. So, what are you waiting for? Start creating pixel art online now, and share your pixel pictures with your friends.</p> </div> </div>  <canvas class="main" width="4000" height="4000"></canvas> <canvas class="grid" width="4000" height="4000"></canvas> <canvas class="tools" width="4000" height="4000"></canvas>  <canvas class="save" style="display:none;" width="4000" height="4000"></canvas>  <div class="menu-bar-outer"> <div class="menu-bar"> <div class="item menu-toggle-button" title="Hide menu" onclick="editor.toggleMenu();"><img class="icon" src="/img/icons/up-arrow-icon-white.png" alt=""/></div> <div class="item marquee-button" title="Marquee/Select tool" onclick="editor.changeTool('marquee');"><img class="icon" src="/img/icons/marquee-icon-white.png" alt=""/><div class="tint"></div></div> <div class="item pen-button" title="Pen tool (P)" onclick="editor.changeTool('pen');"><img class="icon" src="/img/icons/pen-icon-white.png" alt=""/><div class="tint" style="display:block;"></div></div> <div class="item line-button" title="Straight line tool (L)" onclick="editor.changeTool('line');"><img class="icon" src="/img/icons/line-icon-white.png" alt=""/><div class="tint"></div></div> <div class="item bucket-button" title="Fill tool (F)" onclick="editor.changeTool('bucket');"><img class="icon" src="/img/icons/bucket-icon-white.png" alt=""/><div class="tint"></div></div> <div class="item eraser-button" title="Eraser (E)" onclick="editor.changeTool('eraser');"><img class="icon" src="/img/icons/eraser-icon-white.png" alt=""/><div class="tint"></div></div> <div class="item palette-button" title="Change colour"> <input id="color-picker" class="color" value="1EC7FA" spellcheck="false">   </div> <div class="item eyedropper-button" title="Sample colour (S)" onclick="editor.changeTool('eyedropper');"><img class="icon" src="/img/icons/eyedropper-icon-white.png" alt=""/><div class="tint"></div></div> <div class="item save-button" title="Save as PNG"><img class="icon" src="/img/icons/save-icon-white.png" alt=""/><div class="tint"></div></div> <div class="item grid-button" title="Toggle grid"><img class="icon" src="/img/icons/grid-icon-white.png" alt=""/></div> <div class="item clearcanvas-button" title="Clear the canvas"><img class="icon" src="/img/icons/cleancanvas-icon-white.png" alt=""/></div> <div class="item undo-button" title="Undo last action (CTRL + Z)"><img class="icon" src="/img/icons/undo-icon-white.png" alt=""/></div>   </div> </div>  <div class="save-window"> <div class="save-window-wrap"> <img id="save-art-close-button" class="hover-opacity-change" src="/img/close-cross.png" alt="" /> <p class="title">Save Your Pixels!</p> <div class="center details"> <label>Title:<br/><input style="box-sizing: border-box;" class="full-width" type="text" id="save-art-title" value="1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important; height: 469px !important;" horizontalscrolling="no" verticalscrolling="no"></label><br/> <label>Description:<br/><textarea style="box-sizing: border-box;" class="full-width" id="save-art-desc" placeholder="What's this piece for? What's it about? Feel free to include links."></textarea></label><br/> <div style="padding:0.5rem;background: #ececec;border-radius: 3px;"> <div><label class="pixel-size">Size of each pixel: <input id="custom-pixel-size" type="text" value="10"> <span>px</span></label></div> <div style="margin: 0.5rem 0;"><label><input style="display:inline-block;" id="save-art-private" type="checkbox" name="is_private" value="0"><span style="margin-left: 6px; position:relative; top: -1px; font-weight: normal;">Private (will not be listed in the gallery)</span></label></div> <div>Gallery Channel: <input value="" placeholder="(optional)" id="save-art-gallery-channel-name" style="width: 115px;"> <a id="gallery-channel-link" href="/gallery" target="_blank">show channel</a></div> <div style="font-size: 65%;opacity: 0.6;">Note: You can password-lock channels that have 2 or more separate words.</div> <script> if(localStorage.lastGalleryChannelUsed) { document.querySelector("#save-art-gallery-channel-name").value = localStorage.lastGalleryChannelUsed; document.querySelector("#gallery-channel-link").href = "/gallery/"+document.querySelector("#save-art-gallery-channel-name").value.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9\-]/g, ""); } document.querySelector("#save-art-gallery-channel-name").addEventListener("input", function() { document.querySelector("#gallery-channel-link").href = "/gallery/"+this.value.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9\-]/g, ""); localStorage.lastGalleryChannelUsed = this.value.toLowerCase(); }); document.querySelector("#save-art-gallery-channel-name").addEventListener("input", (e) => { let caretPos = e.target.selectionStart; let text = e.target.value; if(text === "") { return; } let output = ""; for(let c of text) { if(/[A-Z]/.test(c)) { output += c.toLowerCase(); } else if(/[ \-]/.test(c)) { if(output[output.length] !== "-") output += "-"; } else if(/[0-9a-z]/.test(c)) { output += c; } else { if(output[output.length] !== "-") output += "-"; } } e.target.value = output.replace(/-+/g, "-"); setCaretPosition(e.target, caretPos); }); function setCaretPosition(elem, caretPos) { var range; if(elem.createTextRange) { range = elem.createTextRange(); range.move('character', caretPos); range.select(); } else { elem.focus(); if (elem.selectionStart !== undefined) { elem.setSelectionRange(caretPos, caretPos); } } } </script> </div> <button id="save-art-submit-button">Save</button> </div> <p class="loader" style="display:none; text-align:center; margin-top:50px; font-weight:bold;">Saving in progress...</p> <div class="saved-output" style="display:none; text-align:center; margin-top:100px;"> <b>Here's the link to your saved art:</b><br/> <a class="save-link" href="#" target="_blank">Error: Link not loaded</a></p> <br/> <a id="data-url-save-link" href="" download="PixelArt">download PNG</a> </div>  </div> <div class="save-art-window-shadow"></div> </div> <style> .save-window .pixel-size input { display: inline-block; width: 45px; margin: 0; height: 19px; font-size: 18px; text-align: center; margin-bottom: 10px; } .save-window .pixel-size span { font-size: 14px; line-height: 16px; } .save-window .output { text-align:center; } .save-window .output img { max-width:400px; max-height:200px; display:block; margin:0 auto; } .save-window .details { } .save-window { display:none; z-index: 20000; position: fixed; top:0; left:0; width:100%; height:100%; } .save-window-wrap .title { margin:0px; /margin-bottom: 40px;/ text-align:center; font-weight:bold; font-family: 'Merriweather', serif; font-size: 22px; } .save-window-wrap .center { width: 400px; max-width: 100%; margin: 0 auto; } #save-art-close-button { position:absolute; right:10px; top:10px; cursor:pointer; } .save-window-wrap { padding: 10px; } .save-window-wrap label { vertical-align:top; font-family: 'Open Sans', sans-serif; font-size: 17px; } .save-window-wrap textarea, .save-window-wrap input.full-width { width: 100%; font-size: 22px; font-family: 'Merriweather', serif; margin-bottom: 10px; border: 1px solid #bbbbbb; } .save-window-wrap input[type='checkbox'] { } .save-window-wrap textarea { height: 80px; font-family: 'Merriweather', serif; margin-bottom:10px; } .save-window-wrap label { /* font-weight: bold; / } #save-art-submit-button { display:block; margin: 10px auto 0 auto; } .save-art-window-shadow { opacity: 0.2; background: #000000; z-index:90; width:100%; height:100%; position:absolute; top:0; left:0; } .save-window-wrap { z-index:100; background: #ffffff; width: 435px; max-width: 95%; box-sizing: border-box; height: max-content; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 2px; box-shadow: 0px 2px 10px #888888; } </style> <div style="position:absolute; bottom:5px; right: 5px; display:inline-block; width:auto;z-index: 3005; display:none;">  <p style="margin:0;font-size:15px;font-weight:bold;background:#ffffff;"><a style="text-decoration:none;" href="https://pixelartmaker.com/gallery" target="_blank">Visit the gallery</a></p> </div> <div style="display:none;"> <img class="icon" src="/img/icons/up-arrow-icon-white.png" alt=""/> <img class="icon" src="/img/icons/pam-icon-white.png" alt=""/> </div> <div id="dragAndDropTipEl" style="display:none;position:fixed;bottom:10px;right:10px;background: #fbfbfb;border: 1px solid #d4d4d4;border-radius:2px;z-index: 10000;padding: 0.5rem;"> <div><b>Tip:</b> You can <a href="https://perchance.org/ai-text-to-image-generator" target="_blank">generate images</a>, & drag-n-drop them onto the canvas.</div> <div style="background: #2f2f2f;border-radius: 10rem;cursor:pointer;color: white;width: 1.5rem;height: 1.5rem;display: flex;justify-content: center;align-items: center;margin-left: 0.5rem;" onclick="localStorage.theyHaveSeenDragAndDropTip='yes'; dragAndDropTipEl.remove();">✕</div> </div> <script>if(!localStorage.theyHaveSeenDragAndDropTip) dragAndDropTipEl.style.display = "flex";</script> <script> //this gets read by the editor object and put in this.loading_offshoot var loading_offshoot = true; </script>  <script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.10.2.min.js"><\/script>')</script> <script type="text/javascript" src="/jscolor/jscolor.js?v=3452989"></script>  <script src="/js/plugins.js"></script> <script src="/js/lz-string-1.3.3-min.js"></script> <script src="/js/main.js"></script> <script async src="/js/dragAndDropPixelArt.js?v=d3dddsd4dsdddsddf45"></script> <script src="/js/localForage.min.js"></script> <script src="/js/editor.js?v=jr83d4dthf"></script> <script> var parent_unique_name = ''; if(editor.loading_offshoot && !confirm("WARNING: You are about to start an offshoot, but this will override all the pixels that were previously on your canvas. Please click CANCEL to load your previous pixels so that you can save them, or if you have already saved them (or you don't care about them), then click 'Okay' to proceed with creating your offshoot.")) { editor.loadFromLocalStorage(); } else { //offshoot code appears here when they are loading offshoot var thePixelData = $.parseJSON(LZString.decompressFromBase64('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')); if(thePixelData.format=='v2') editor.loadPixelArray(v2FormatToPixelArray(thePixelData)); else editor.loadPixelArray(thePixelData); editor.renderAll();parent_unique_name = '05166535174fd39'; } </script> <script> // since art could be off screen (e.g. in the middle of the canvas), we scroll to it: history.scrollRestoration = 'manual'; window.scrollTo(0, 0); setTimeout(() => { let earliestXPaint = Infinity; let earliestYPaint = Infinity; for(let i = 0; i < editor.pixelArray.length; i++) { for(let j = 0; j < editor.pixelArray[i].length; j++) { let v = editor.pixelArray[i][j]; if(v !== "0") { if(i < earliestXPaint) earliestXPaint = i; if(j < earliestYPaint) earliestYPaint = j; } } } document.scrollingElement.scrollLeft = (earliestXPaint-20) editor.pixelSize; document.scrollingElement.scrollTop = (earliestYPaint-20) * editor.pixelSize; }, 10); </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-KMZZDN61BE"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-KMZZDN61BE'); </script> </body> </html>