0

I am trying to create an app like paint, where you can draw basic shapes with a preview. I implemented a draw function for ellipse, rectangle and line shapes. I want the user to be possible to select the colour they want to draw with it and to change the colour of the background. The problem is that I store the id of input in colorInput and then the selected colour inselectedColor, but my colorInput is always null.

//Stores selected color for drawing
var colorInput = document.getElementById("colors");
var selectedColor = colorInput.value;
//Schimba culoarea
function changeColorStroke(color) {
  ctx.strokeStyle = color;
}

function changeColorFill(color) {
  ctx.fillStyle = color;
}
// Called to draw the line
function drawRubberbandShape(loc) {
  if (selectedColor !== null) {
    changeColorStroke(selectedColor);
    changeColorFill(selectedColor);
  } else {
    ctx.strokeStyle = "red";
    ctx.fillStyle = "red";
  }


  if (currentTool === "line") {
    // Draw Line
    ctx.beginPath();
    ctx.moveTo(mousedown.x, mousedown.y);
    ctx.lineTo(loc.x, loc.y);
    ctx.stroke();
  } else if (currentTool === "rectangle") {
    // Creates rectangles
    ctx.strokeRect(shapeBoundingBox.left, shapeBoundingBox.top, shapeBoundingBox.width, shapeBoundingBox.height);
  } else if (currentTool === "ellipse") {
    //Create ellipses
    //ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
    let radiusX = shapeBoundingBox.width / 2;
    let radiusY = shapeBoundingBox.height / 2;
    ctx.beginPath();
    ctx.ellipse(mousedown.x, mousedown.y, radiusX, radiusY, Math.PI / 4, 0, Math.PI * 2);
    ctx.stroke();
  }

}
body {
  background-color: #0fffff;
}

.wrapper {
  max-width: 1100px;
  margin: auto;
  font-family: "Arial";
}

.toolbar {
  width: 103%;
  background-color: #c1f5cf;
  overflow: auto;
}

.toolbar a {
  float: left;
  width: 11%;
  text-align: center;
  padding: 6px 5px;
  transition: all 0.5s ease;
  color: white;
}


/* Change color on hover */

.toolbar a:hover {
  background-color: #10e682;
}


/* Change color on selected icon */

.selected {
  background-color: #c1f5cf;
}

#tempcanvas {
  width: 100%;
  background-color: white;
  border: 15px ridge grey;
  padding: 15px;
  width: 1300;
  height: 800;
  position: "absolute";
}

#img-data-div {
  width: 100%;
  max-width: 900px;
  height: 200px;
}


/* Resize image to container */

.toolbar a img {
  max-width: 100%;
  height: auto;
}
<div class="wrapper">
  <div class="toolbar">
    <!-- <a class="selected" href="#" id="open" onclick="OpenImage()"><img src="open-icon.png"></a> -->
    <label>Salvare in format png</label>
    <a href="#" id="save" onclick="SaveImage()"><img src="save-icon.png"></a>
    <a href="#" id="line" onclick="ChangeTool('line')"><img src="line-icon.png"></a>
    <a href="#" id="rectangle" onclick="ChangeTool('rectangle')"><img src="rectangle-icon.png"></a>
    <a href="#" id="ellipse" onclick="ChangeTool('ellipse')"><img src="ellipse-icon.png"></a>
    <!-- <label for="favcolor">Select your favorite color:</label> -->
    <input type="color" id="colors" value="#ff0000"></input>
  </div>
  <canvas id="tempcanvas"></canvas>
  <div id="img-data-div">
    <a href="#" id="img-file" download="image.png">download image</a>
    <!-- <a href="#" id="img-file-svg" download="image.svg">download vectorial image</a> -->
  </div>
</div>
ptothep
  • 415
  • 3
  • 10
programmingDracula2699
  • 47
  • 8
  • Where are the functions `changeColorStroke` and `changeColorFill` defined? – ptothep Dec 25 '20 at 17:25
  • I think the var colorInput = document.getElementById("colors"); should be under change event function on colors. so whenever colors change it will set that value. make sure declare the var colorInput outside of the function – A Paul Dec 25 '20 at 17:34
  • It is declared outside of the function – programmingDracula2699 Dec 25 '20 at 17:35
  • @programmingDracula2699 yes the variable will be declared outside var colorInput; var selectedColor; function oncolorschange() { colorInput = document.getElementById("colors"); selectedColor = colorInput.value; } – A Paul Dec 25 '20 at 17:36
  • Now I uderstand! If I declare and assigne a value to colorInput outside colorChange it gets null value because I didn't selected anything. It worked! Thank you! – programmingDracula2699 Dec 25 '20 at 18:27

0 Answers0