Menu
I made a simple drawing app with HTML5 canvas. You click in two different positions to draw a line from one point to another. I also have two text input boxes where you can change the line thickness and color. Problem is, when I change the color of a line it changes all the previously drawn lines. This also happens when changing line thickness, but only if I draw a thicker line than before (if I draw a thinner line the other lines do not change).
I'm new to HTML5 and all so any help would be greatly appreciated.
<!DOCTYPE html> <html> <head> <title>Canvas</title> </head> <body> <canvas width="300" height="300" id="myCanvas"></canvas> <br /> <input type="button" value="Enter Coordinates" onclick="enterCoordinates()"></input> Line Width: <input type="text" id="lineWidth"></input> Line Color: <input type="text" id="lineColor"></input> <script type="text/javascript"> var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,300,300); function drawLine(start,start2,finish,finish2) { var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); // optional variables lineWidth = document.getElementById('lineWidth').value; if (lineWidth) { ctx.lineWidth=lineWidth; } lineColor = document.getElementById('lineColor').value; if (lineColor) { ctx.strokeStyle=lineColor; } ctx.moveTo(start,start2); ctx.lineTo(finish,finish2); ctx.stroke(); } function enterCoordinates() { var values = prompt('Enter values for line.\n x1,y1,x2,y2',''); var start = values.split(",")[0]; var start2 = values.split(",")[1]; var finish = values.split(",")[2]; var finish2 = values.split(",")[3]; drawLine(start,start2,finish,finish2); } </script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", init, false); function init() { var canvas = document.getElementById("myCanvas"); canvas.addEventListener("mousedown", getPosition, false); } function getPosition(event) { var x = new Number(); var y = new Number(); var canvas = document.getElementById("myCanvas"); if (event.x != undefined && event.y != undefined) { x = event.x; y = event.y; } else // Firefox method to get the position { x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; } x -= canvas.offsetLeft; y -= canvas.offsetTop; if (window.startx) { window.finishx = x; window.finishy = y; drawLine(window.startx,window.starty,window.finishx,window.finishy); // reset window.startx = null; } else { window.startx = x; window.starty = y; } } </script> </body> </html> 
243
Just add a closePath() call (as well as beginPath) where you draw your line, like this:
ctx.beginPath(); ctx.moveTo(start,start2); ctx.lineTo(finish,finish2); ctx.stroke(); ctx.closePath(); Otherwise instead of drawing only the newest line, you're gonna draw all the previous lines again because the open path is still the same, thus causing the effect of the lines changing color and width when what you're looking at is actually new lines being drawn over them.
59
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
