window.onload = function() { c = document.getElementById("canvas"); c.width = window.innerWidth; c.height = window.innerHeight / 10 * 9; ctx = c.getContext("2d"); c.addEventListener("touchstart", start, false); c.addEventListener("touchmove", move, false); c.addEventListener("touchend", end, false); c.addEventListener("touchcancel", end, false); document.getElementById("brushSel").addEventListener("webkitAnimationEnd", function() { if (brushUp == true) { document.getElementById("brushSel").style.bottom = 0; brushUp = false; } else if (brushUp == false) { document.getElementById("brushSel").style.bottom = s[0].style.height; brushUp = true; } },false); w = document.getElementById("wrapper"); w.style.width = "100%"; w.style.height = window.innerHeight / 10 + "px"; s = document.getElementsByClassName("selector"); for (var i = 0; i < s.length; i++) { s[i].style.height = window.innerHeight / 10 + "px"; s[i].style.width = s[i].style.height; if (i == s.length - 2) { s[i].style.right = s[0].style.width; } } document.getElementById("brushSel").style.height = s[0].style.height; //document.getElementById("brushSel").style.bottom = s[0].style.height.split('px')[0] + "px"; document.getElementById("brushType").addEventListener("click", toggleMenu, false); document.getElementById("brushWidth").addEventListener("click", changeBrushW, false); document.getElementById("undo").addEventListener("click", undo, false); document.getElementById("redo").addEventListener("click", redo, false); // document.getElementById("export").addEventListener("click", exportPNG, false); updateTXT(); update(); if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent))) { alert("I see you're using a pc, for now this is mobile-only.\nIf you want to use this on your pc follow these steps:\n\n-Open Chrome.\n-Press the cntrl, shift and 'i' keys at the same time.\n-Go to the top of the small window you've just opened and click the phone/tablet icon.\n\nEnjoy!") } } function exportPNG() { location.replace(c.toDataURL("image/png")); } var ongoingTouches = []; function start(e) { e.preventDefault(); var touches = e.changedTouches; for (var i = 0; i < touches.length; i++) { ongoingTouches.push(copyTouch(touches[i])); touchX = touches[i].pageX; touchY = touches[i].pageY; switch (brush) { case "pencil": dot(touchX, touchY, getColor(), brushW / 2); break; case "eraser": clear(); break; case "fill": fillTool(); break; } } } var temp = []; function undo() { if (lines.length > 0) { temp.push(lines.pop()); } } function redo() { if (temp.length > 0) lines.push(temp.pop()); } function updateTXT() { requestAnimationFrame(updateTXT); tab = " | "; txt = "color: " + getColor() + "" + tab + "brushtype: " + brush + tab + "width: " + brushW + tab + "created by: The Coding Sloth"; document.getElementById("sp").innerHTML = txt; } function move(e) { e.preventDefault(); var touches = e.changedTouches; for (var i = 0; i < touches.length; i++) { ongoingTouches.push(copyTouch(touches[i])); touchX = touches[i].pageX; touchY = touches[i].pageY; switch (brush) { case "pencil": line(getColor(), brushW); /*dot(touchX, touchY, getColor(), brushW / 2);*/ break; case "eraser": line(bgColor, brushW); dot(touchX, touchY, bgColor, brushW / 2); break; case "fill": break; case "rectangle": break; case "circle": break; } } temp = []; } function clear() { } function end(e) { lines.push(saveLines); if (brush == "rectangle") { try { var color = getColor(); lines.push(['RECT', ongoingTouches[0].pageX, ongoingTouches[0].pageY, ongoingTouches[ongoingTouches.length - 1].pageX - ongoingTouches[0].pageX, ongoingTouches[ongoingTouches.length - 1].pageY - ongoingTouches[0].pageY, color, brushW]); } catch(err) {} } if (brush == "circle") { try { var color = getColor(); lines.push(['CIRCLE', ongoingTouches[0].pageX, ongoingTouches[0].pageY, ongoingTouches[ongoingTouches.length - 1].pageX - ongoingTouches[0].pageX, ongoingTouches[ongoingTouches.length - 1].pageY - ongoingTouches[0].pageY, color, brushW]); } catch(err) {} } saveLines = []; ongoingTouches = []; } var saveLines = []; function dot(x, y, color, size) { ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, size, 0, 2 * Math.PI); ctx.fill(); } function line(color, size) { ctx.lineWidth = size; ctx.strokeStyle = color; ctx.beginPath(); ctx.moveTo(ongoingTouches[ongoingTouches.length - 2].pageX, ongoingTouches[ongoingTouches.length - 2].pageY); ctx.lineTo(ongoingTouches[ongoingTouches.length - 1].pageX, ongoingTouches[ongoingTouches.length - 1].pageY); ctx.stroke(); savedL.push([ongoingTouches[ongoingTouches.length - 1], ongoingTouches[ongoingTouches.length - 2]]); saveLines.push([ongoingTouches[ongoingTouches.length - 1], ongoingTouches[ongoingTouches.length - 2], color, size]); } function copyTouch(touch) { return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY }; } function getColor() { var co = document.getElementById("cp").value; return co; } var brush = "pencil"; var bgColor = "white"; var brushW = 5; var savedL = []; var lines = []; function changeBrushW() { var w = prompt("Enter the brush width"); if (!isNaN(w) && w != null) { brushW = w; if (brushW > c.height * 2.5) brushW = c.height * 2.5; } } var brushUp = false; function toggleMenu() { if (brushUp == false) { document.getElementById("brushSel").style.animation = "brushUp 0.5s"; } else if (brushUp == true) { document.getElementById("brushSel").style.animation = "brushDown 0.5s"; } } function changeBrushT(t) { var b = document.getElementById("brushType"); toggleMenu(); switch (t) { case "pencil": brush = "pencil"; b.style.background = "url('http://img.teapic.com/thumbs/201401/17/151941kpsuyjopgeszinpi.jpg.middle.jpg') center center/contain no-repeat"; b.style.transform = "scaleY(-1)"; break; case "eraser": brush = "eraser"; b.style.background = "url('https://image.flaticon.com/icons/png/128/179/179530.png') center center/contain no-repeat"; b.style.transform = "scaleY(1)"; break; case "fill": brush = "fill"; b.style.background = "url('https://maxcdn.icons8.com/Share/icon/Editing//paint_basket1600.png') center center/contain no-repeat"; b.style.transform = "scaleY(1)"; break; case "rectangle": brush = "rectangle"; b.style.background = "url('https://d30y9cdsu7xlg0.cloudfront.net/png/589672-200.png') center center/contain no-repeat"; b.style.transform = "scaleY(1)"; break; case "circle": brush = "circle"; b.style.background = "url('https://d30y9cdsu7xlg0.cloudfront.net/png/149199-200.png') center center/contain no-repeat"; b.style.transform = "scale(1)"; break; default: brush = brush; } } function update() { requestAnimationFrame(update); ctx.fillStyle = bgColor; ctx.fillRect(0, 0, c.width, c.height); ctx.lineCap = "round"; ctx.lineJoin = "round"; for (var i = 0; i < lines.length; i++) { for (var j = 0; j < lines[i].length; j++) { if (lines[i][0] == 'RECT') { ctx.strokeStyle = lines[i][5]; ctx.lineWidth = lines[i][6]; ctx.strokeRect(lines[i][1], lines[i][2], lines[i][3], lines[i][4]) } else if (lines[i][0] == 'CIRCLE') { ctx.strokeStyle = lines[i][5]; ctx.lineWidth = lines[i][6]; ctx.beginPath(); ctx.ellipse(lines[i][1], lines[i][2], Math.abs(lines[i][3]), Math.abs(lines[i][4]), 0, 0, 2 * Math.PI); ctx.stroke(); } else { var cl = lines[i][j]; ctx.strokeStyle = cl[2]; ctx.lineWidth = cl[3]; ctx.beginPath(); ctx.moveTo(cl[0].pageX, cl[0].pageY); ctx.lineTo(cl[1].pageX, cl[1].pageY); ctx.stroke(); /* ctx.fillStyle = cl[2]; ctx.beginPath(); ctx.arc(cl[0].pageX, cl[0].pageY, cl[3] / 2, 0, 2 * Math.PI); ctx.fill();*/ } } } if (ongoingTouches.length > 2 && brush == "pencil" || brush == "eraser") { for (var i = 1; i < ongoingTouches.length; i++) { var cl = ongoingTouches[i]; var ll = ongoingTouches[i - 1]; if (brush == "eraser") ctx.strokeStyle = bgColor; else ctx.strokeStyle = getColor(); ctx.lineWidth = brushW; ctx.beginPath(); ctx.moveTo(cl.pageX, cl.pageY); ctx.lineTo(ll.pageX, ll.pageY); ctx.stroke(); if (brush == "eraser") ctx.fillStyle = bgColor; else ctx.fillStyle = getColor(); ctx.beginPath(); ctx.arc(cl.pageX, cl.pageY, brushW / 2, 0, 2 * Math.PI); ctx.fill(); } } if (brush == "rectangle" && ongoingTouches.length != 0) { ctx.lineWidth = brushW; ctx.strokeStyle = getColor(); ctx.strokeRect(ongoingTouches[0].pageX, ongoingTouches[0].pageY, touchX - ongoingTouches[0].pageX, touchY - ongoingTouches[0].pageY); } if (brush == "circle" && ongoingTouches.length != 0) { ctx.lineWidth = brushW; ctx.strokeStyle = getColor(); var rX = touchX - ongoingTouches[0].pageX; var rY = touchY - ongoingTouches[0].pageY; ctx.beginPath(); ctx.ellipse(ongoingTouches[0].pageX, ongoingTouches[0].pageY, Math.abs(rX), Math.abs(rY), 0, 0, 2 * Math.PI); ctx.stroke(); } if (brush == "eraser" && ongoingTouches.length != 0) { ctx.lineWidth = 1; ctx.fillStyle = "gray"; ctx.beginPath(); ctx.arc(touchX, touchY, brushW, 0, 2 * Math.PI); ctx.fill(); } } function fillTool() { alert("this function does not work yet"); /* console.log(lines[0][0][0].pageX + ", " + lines[0][0][1].pageX) ctx.strokeStyle = "red"; ctx.beginPath(); //for (var i = 0; i < lines.length; i++) { for (var j = 0; j < lines[0].length; j++) { if (j == 0) ctx.moveTo(lines[0][j][0].pageX, lines[0][j][0].pageY); ctx.lineTo(lines[0][j][1].pageX, lines[0][j][1].pageY); } //} ctx.closePath(); ctx.stroke();*/ } function lineIntersect(x1,y1,x2,y2, x3,y3,x4,y4) { var x = ((x1*y2-y1*x2)*(x3-x4)-(x1-x2)*(x3*y4-y3*x4))/((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4)); var y = ((x1*y2-y1*x2)*(y3-y4)-(y1-y2)*(x3*y4-y3*x4))/((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4)); if (isNaN(x)||isNaN(y)) { return false; } else { if (x1>=x2) { if (!(x2<=x&&x<=x1)) {return false;} } else { if (!(x1<=x&&x<=x2)) {return false;} } if (y1>=y2) { if (!(y2<=y&&y<=y1)) {return false;} } else { if (!(y1<=y&&y<=y2)) {return false;} } if (x3>=x4) { if (!(x4<=x&&x<=x3)) {return false;} } else { if (!(x3<=x&&x<=x4)) {return false;} } if (y3>=y4) { if (!(y4<=y&&y<=y3)) {return false;} } else { if (!(y3<=y&&y<=y4)) {return false;} } } return true; }

Paint🖌️