Home/ Questions/Q 7491683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T16:06:12+00:00

I made a simple drawing app with HTML5 canvas. You click in two different

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0