Welcome to our interactive coloring page dedicated to our charming character, Little Scarlett! Your creative spark will definitely love this space where you can add life to different fun-filled drawings of Scarlett. This exciting feature isn’t restricted by device; whether you’re on desktop, tablet, or even your mobile phone, you can awaken your inner artist whenever and wherever you please. So, sit back, relax, and have fun coloring Little Scarlett – your colorful adventure is just a click away!

Pick a coloring page of Scarlett from the available pages at the top to load it onto the main screen.

Colors can be chosen at the top left and there is also a sliding bar to change the size of the brush.

To the right of the colors at the top, there are three buttons, in order from left to right: undo, clear, and save.

Once you’re done coloring your new masterpiece, you can save it right to your device!

fun@littlescarlett.com

'; windowContent += ''; const printWin = window.open('', '', 'width=' + screen.availWidth + ',height=' + screen.availHeight); printWin.document.open(); printWin.document.write(windowContent); printWin.document.addEventListener('load', function() { printWin.focus(); printWin.print(); printWin.document.close(); printWin.close(); }, true); } loadImage(url) { return new Promise(resolve => { const image = new Image(); image.addEventListener('load', () => { resolve(image); }); image.src = url; }); } async getImageData() { let height=this.img[0].naturalHeight; let width=this.img[0].naturalWidth let cv=jQuery(``)[0]; let c = cv.getContext('2d'); c.drawImage(this.img[0],0,0,width,height); let i= await this.loadImage(this.canvas[0].toDataURL('image/png')); c.drawImage(i,0,0); return cv.toDataURL('image/png'); } async save() { let link=await this.getImageData(); let x =jQuery(`Download`).attr('href',link).appendTo(this.wrapper) x[0].click(); x.remove(); } sizeCanvas() { this.canvasPos = this.canvas[0].getBoundingClientRect(); this.canvas.attr('height',this.img[0].naturalHeight); this.canvas.attr('width',this.img[0].naturalWidth); this.activeCanvas.attr('height',this.img[0].naturalHeight); this.activeCanvas.attr('width',this.img[0].naturalWidth); } getCursorPosition(e) { this.canvasPos = this.canvas[0].getBoundingClientRect(); let adj=this.canvas.attr('width')/this.canvas.width(); return { x: (e.clientX - this.canvasPos.left)*adj, y: (e.clientY - this.canvasPos.top)*adj, }; } mouseDown(e) { let pos = this.getCursorPosition(e); this.dragging = true; pos.c=this.color; pos.s=this.sizer.val(); this.paths.push([pos]); this.setCursor(); } mouseUp(e) { this.commitActivePath(); if (this.dragging) localStorage.setItem('v2:'+jQuery(this).attr('src'),JSON.stringify(this.paths)); this.dragging = false; } mouseMove(e) { let pos; if (!this.dragging) return; pos = this.getCursorPosition(e); this.paths[this.paths.length-1].push(pos); // Append point tu current path. this.drawActivePath(); } commitActivePath() { this.drawActivePath(true); } clearActivePath() { let height=this.img[0].naturalHeight; let width=this.img[0].naturalWidth; let ctx=this.activeCtx; ctx.clearRect(0, 0, width, height); } drawActivePath(saveToCanvas=false) { this.clearActivePath(); let ctx; let path=this.paths[this.paths.length-1]; if (saveToCanvas==true || path[0].c==(this.paletteColors.length-1)) {ctx=this.ctx;} else {ctx=this.activeCtx;} if (!path[0].c) { path[0].c=0;} ctx.strokeStyle = `${this.paletteColors[path[0].c]}`; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = path[0].s * (this.img[0].naturalWidth/this.img.width()); if (path[0].c==(this.paletteColors.length-1)) { /*eraser*/ ctx.globalCompositeOperation="destination-out"; ctx.strokeStyle = `white`; } else ctx.globalCompositeOperation="source-over"; ctx.beginPath(); ctx.moveTo(path[0].x, path[0].y); for (let j=1; j 32) size=32; let canvas=jQuery(``); let context = canvas[0].getContext('2d'); context.beginPath(); context.arc(16, 16, size/2, 0, 2 * Math.PI, false); context.fillStyle = this.paletteColors[this.color]; context.fill(); context.strokeStyle='black' context.strokeWidth=2; context.stroke(); context.strokeStyle='rgba(0, 0, 0, 0.5)'; context.strokeWidth=2; context.beginPath(); context.moveTo(0,16) context.lineTo(32,16) context.moveTo(16,0) context.lineTo(16,32) context.stroke(); let url=canvas[0].toDataURL(); this.wrapper.css('cursor', `url(${url}) 16 16, pointer`); } });;