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).
*/