var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d") canvas.width = window.innerWidth canvas.height = window.innerHeight ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.fillStyle='transparent' ctx.fillRect(0,0,canvas.width, canvas.height) function circle(x, y, radius,color,width) { ctx.lineWidth = width ctx.strokeStyle = color ctx.beginPath() ctx.arc(x, y, radius, 0, Math.PI * 2, false) ctx.stroke() } function triangle(x,y,color,size,lineWidth) { ctx.lineWidth = lineWidth var size=10+size ctx.beginPath() ctx.lineTo(x,y) ctx.lineTo(x+size,y) ctx.lineTo(x+size,y+size) ctx.closePath() ctx.strokeStyle=color ctx.stroke() } function rectangle(x,y,width,height,color,lineWidth){ ctx.lineWidth = lineWidth ctx.strokeStyle=color ctx.strokeRect(x,y,width,height) } document.onclick=function(e){ draw(e) } document.ontouchstart=function(e){ draw(e) } function draw(e){ e.preventDefault() circle(e.pageX-0, e.pageY-25, 12,"green",1) circle(e.pageX-5, e.pageY-25,5,'red',1) document.ontouchstart=function(e){ e.preventDefault(); circle(e.pageX-5, e.pageY-25, 10,"green",1) circle(e.pageX, e.pageY, 20,"red",2) } /* Instructions: 1. Create a new folder and index.html file. 2. Paste in ALL of this code and get the page working. 3. Test it on your iPad. Test the add to homescreen. 4. Change the different variables: position, size, color and linethickness for the shapes. 5. Make your own working app. You can get new icons from nryan.org/g/svg use 'png data' button (orange coloured). */