new

HTML
<!DOCTYPE html> <html> <head> <title>Simple Paint App</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="draw.js"></script> </head> <body> <h2 style="text-align: center;" >Simple Paint App</h2> <canvas id="myCanvas" style="align-self: center;"></canvas> </body> </html>
CSS
#myCanvas{ width: 600px; height: 400px; border: 2px solid; border-color: red; margin-left: 200px; }
JAVASCRIPT
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); let draw = false; function startTri(e){ draw = true; drawTri(e); } function endTri(){ draw = false; } function drawTri(e){ if(!draw) return; ctx.lineWidth=3; ctx.lineTo(e.clientX,e.clientY); ctx.stroke(); ctx.beginPath(); ctx.moveTo(e.clientX,e.clientY); } myCanvas.addEventListener("mousedown",startTri); myCanvas.addEventListener("mouseup",endTri); myCanvas.addEventListener("mousemove",drawTri);
Expand for more options Login