var arr_touches = []; var canvas; var ctx; var H = window.innerHeight; var W = window.innerWidth; var down = false; //mouse is pressed var color = 'black'; //default drawing color var size = 5; // drawing width var inputs; var xPos, yPos; //calling window.onload to make sure the HTML is loaded window.onload = function() { canvas = document.querySelector('canvas'); canvas.height = H; canvas.width = W; ctx = canvas.getContext('2d'); inputs = [document.querySelector("#r"), document.querySelector("#g"), document.querySelector("#b"), document.querySelector("#a"), document.querySelector("#s")]; canvas.addEventListener('mousemove', handleMove); canvas.addEventListener('mousedown', handleDown); canvas.addEventListener('mouseup', handleUp); //handling mobile touch events canvas.addEventListener("touchstart", handleStart, false); canvas.addEventListener("touchend", handleEnd, false); canvas.addEventListener("touchcancel", handleCancel, false); canvas.addEventListener("touchleave", handleEnd, false); canvas.addEventListener("touchmove", handleTouchMove, false); document.querySelector(".color").style.display = "none"; document.querySelector(".pencil").style.display = "none"; setInterval(update, 1000/30) }; function handleMove(e) { xPos = e.clientX-canvas.offsetLeft; yPos = e.clientY-canvas.offsetTop; if(down == true) { ctx.lineTo(xPos,yPos); //create a line from old point to new one ctx.strokeStyle = color; ctx.stroke(); } } function handleDown() { down = true; ctx.beginPath(); ctx.moveTo(xPos, yPos); } function handleUp() { down = false; } function handleStart(evt) { var touches = evt.changedTouches; for(var i = 0; i < touches.length; i++) { if(isValidTouch(touches[i])) { evt.preventDefault(); arr_touches.push(copyTouch(touches[i])); ctx.beginPath(); ctx.fillStyle = color; ctx.fill(); } } } function handleTouchMove(evt) { var touches = evt.changedTouches; var offset = findPos(canvas); for (var i = 0; i < touches.length; i++) { if(isValidTouch(touches[i])) { evt.preventDefault(); var idx = ongoingTouchIndexById(touches[i].identifier); if (idx >= 0) { ctx.beginPath(); ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y); ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y); ctx.strokeStyle = color; ctx.stroke(); arr_touches.splice(idx, 1, copyTouch(touches[i])); } } } } function handleEnd(evt) { var touches = evt.changedTouches; var offset = findPos(canvas); for (var i = 0; i < touches.length; i++) { if(isValidTouch(touches[i])) { evt.preventDefault(); var idx = ongoingTouchIndexById(touches[i].identifier); if (idx >= 0) { ctx.lineWidth = size-1; ctx.fillStyle = color; ctx.beginPath(); ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y); ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y); arr_touches.splice(i, 1); } } } } function handleCancel(evt) { evt.preventDefault(); var touches = evt.changedTouches; for (var i = 0; i < touches.length; i++) { arr_touches.splice(i, 1); } } function copyTouch(touch) { return {identifier: touch.identifier,clientX: touch.clientX,clientY: touch.clientY}; } function ongoingTouchIndexById(idToFind) { for (var i = 0; i < arr_touches.length; i++) { var id = arr_touches[i].identifier; if (id == idToFind) { return i; } } return -1; } function isValidTouch(touch) { var curleft = 0, curtop = 0; var offset = 0; if (canvas.offsetParent) { do { curleft += canvas.offsetLeft; curtop += canvas.offsetTop; } while (touch == canvas.offsetParent); offset = { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop }; } if(touch.clientX-offset.x > 0 && touch.clientX-offset.x < parseFloat(canvas.width) && touch.clientY-offset.y >0 && touch.clientY-offset.y < parseFloat(canvas.height)) { return true; } else { return false; } } function findPos(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj == obj.offsetParent); return { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop }; } } function update(){ if(inputs[0].value>=0&&inputs[0].value<=255&&inputs[1].value>=0&&inputs[1].value<=255&&inputs[2].value>=0&&inputs[2].value<=255&&inputs[3].value>=0&&inputs[3].value<=100){ color = "rgba("+inputs[0].value+","+inputs[1].value+","+inputs[2].value+","+inputs[3].value/100+")"; } else { color = "rgba(0,0,0,1)"; } if(inputs[4].value>0){ size = inputs[4].value; } else { size = 5; } ctx.lineWidth = size; inputs[0].style.backgroundColor = color; inputs[1].style.backgroundColor = color; inputs[2].style.backgroundColor = color; inputs[3].style.backgroundColor = color; } function mColor(){ if(document.querySelector(".color").style.display=="none"){ document.querySelector(".color").style.display = "block"; } else { document.querySelector(".color").style.display = "none"; } } function mPencil(){ if(document.querySelector(".pencil").style.display=="none"){ document.querySelector(".pencil").style.display = "block"; } else { document.querySelector(".pencil").style.display = "none"; } }

Paint 1.2