Why are my cursor and my drawing line on opposite sides?

Question

Why are my cursor and my drawing line on opposite sides?

I've been working on a JavaScript drawing app, but I'm facing an issue where the drawn elements are not aligned with my cursor. The positioning seems off, especially when moving to the right or up on the canvas. As I move towards the furthest left or bottom side of the canvas, the alignment improves and matches the cursor position accurately. Can someone help me troubleshoot this?

const canvas = document.getElementById("canvas");
const increaseBtn = document.getElementById("increase");
const decreaseBtn = document.getElementById("decrease");
const sizeEl = document.getElementById("size");
const colorEl = document.getElementById("color");
const clearEl = document.getElementById("clear");

//Core Drawing Functionality (with some research)

const ctx = canvas.getContext("2d");

let size = 5;
let isPressed = false;
let color = "black";
let x;
let y;
let fakeSize = 1;

canvas.addEventListener("mousedown", (e) => {
  isPressed = true;
  x = e.offsetX;
  y = e.offsetY;
});

canvas.addEventListener("mouseup", (e) => {
  isPressed = false;
  x = undefined;
  y = undefined;
});

canvas.addEventListener("mousemove", (e) => {
  if (isPressed) {
    const x2 = e.offsetX;
    const y2 = e.offsetY;

    drawCircle(x2, y2);
    drawLine(x, y, x2, y2);

    x = x2;
    y = y2;
  }
});

function drawCircle(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, size, 0, Math.PI * 2);

  ctx.fillStyle = color;
  ctx.fill();
}

function drawLine(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.strokeStyle = color;
  ctx.lineWidth = size * 2;
  ctx.stroke();
}

function updateSizeOnScreen() {
  sizeEl.innerHTML = fakeSize;
}

increaseBtn.addEventListener("click", () => {
  size += 5;
  fakeSize++;
  if (fakeSize > 10) {
    fakeSize = 10;
  }

  if (size > 50) {
    size = 50;
  }

  updateSizeOnScreen();
});

decreaseBtn.addEventListener("click", () => {
  size -= 5;
  fakeSize--;
  if (fakeSize < 1) {
    fakeSize = 1;
  }

  if (size < 5) {
    size = 5;
  }

  updateSizeOnScreen();
});

colorEl.addEventListener("change", (e) => {
  color = e.target.value;
});

clearEl.addEventListener("click", () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
});

//Eraser and Pencil Actions (my own algorithm)

const eraser = document.getElementById("eraser");
const pencil = document.getElementById("pencil");

eraser.addEventListener("click", () => {
  localStorage.setItem("colorEl", JSON.stringify(color));
  color = "#fff";
  colorEl.disabled = true;
  canvas.classList.add("eraseractive");
  eraser.classList.add("eraseractive");
  colorEl.classList.add("eraseractive");
  canvas.classList.remove("pencilactive");
  eraser.classList.remove("pencilactive");
  colorEl.classList.remove("pencilactive");
});

pencil.addEventListener("click", () => {
  JSON.parse(localStorage.getItem("colorEl"));
  color = colorEl.value;
  colorEl.disabled = false;
  canvas.classList.remove("eraseractive");
  eraser.classList.remove("eraseractive");
  colorEl.classList.remove("eraseractive");
  canvas.classList.add("pencilactive");
  eraser.classList.add("pencilactive");
  colorEl.classList.add("pencilactive");
});

// Dark/Light Mode

const darkMode = document.getElementById("darkMode");
const lightMode = document.getElementById("lightMode");
const toolbox = document.getElementById("toolbox");

darkMode.addEventListener("click", () => {
  darkMode.classList.add("mode-active");
  lightMode.classList.remove("mode-active");
  lightMode.classList.add("rotate");
  darkMode.classList.remove("rotate");
  toolbox.style.backgroundColor = "#293462";
  document.body.style.backgroundImage =
    "url('/assets/images/darkModeBackground.svg')";

  document.body.style.backgroundSize = "1920px 1080px";
  canvas.style.borderColor = "#293462";
  toolbox.style.borderColor = "#293462";
});

lightMode.addEventListener("click", () => {
  lightMode.classList.add("mode-active");
  darkMode.classList.remove("mode-active");
  darkMode.classList.add("rotate");
  lightMode.classList.remove("rotate");
  toolbox.style.backgroundColor = "#293462";
  document.body.style.backgroundImage =
    "url('/assets/images/lightModeBackground.svg')";

  document.body.style.backgroundSize = "1920px 1080px";
  canvas.style.borderColor = "#293462";
  toolbox.style.borderColor = "#293462";
});

* {
  box-sizing: border-box;
  font-size: 20px !important;
}

body {
  background: url("https://drawing-app-green.vercel.app/assets/images/lightModeBackground.svg");
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  position: relative;
  max-height: 100vh;
  overflow: hidden;
}

::selection {
  background: transparent;
}

::-moz-selection {
  background: transparent;
}

.mode {
  display: flex;
  position: absolute;
  top: 10px;
  right: 25px;
  cursor: pointer;
}

.light-mode {
  color: yellow;
}

.dark-mode {
  color: #16213e;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  width: 100%;
  max-height: 600px;
  height: 100%;
}

canvas {
  display: flex;
  border: 2px solid #293462;
  cursor: url("https://drawing-app-green.vercel.app/assets/images/pencilCursor.png") 2 48, pointer;
  background-color: #fff;
  margin-top: 3rem;
  width: 100%;
  height: 600px;
}

.toolbox {
  background-color: #293462;
  border: 1px solid #293462;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
}

.toolbox > * {
  background-color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  height: 30px;
  width: 30px;
  margin: 0.25rem;
  padding: 0.25rem;
  cursor: pointer;
}

.toolbox > *:last-child {
  margin-left: auto;
}

canvas.eraseractive {
  cursor: url("https://drawing-app-green.vercel.app/assets/images/eraserCursor.png") 2 48, pointer;
}

#color.eraseractive {
  cursor: not-allowed;
}

canvas.pencilactive {
  cursor: url("https://drawing-app-green.vercel.app/assets/images/pencilCursor.png") 2 48, pointer;
}

.mode-active {
  visibility: hidden;
}

.rotate {
  transform: rotate(360deg);
  transition: transform 1s linear;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drawing App</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>

  <body>
    <i class="fa-solid fa-moon dark-mode fa-2x mode" id="darkMode"></i>
    <i
      class="fa-solid fa-sun light-mode fa-2x mode mode-active"
      id="lightMode"
    ></i>
    <div class="container">
      <canvas id="canvas" width="1024" height="600"></canvas>
      <div class="toolbox" id="toolbox">
        <button id="decrease">-</button>
        <span id="size">1</span>
        <button id="increase">+</button>
        <input type="color" id="color" />
        <button id="pencil">
          <img src="assets/images/pencilCursor.png" alt="" />
        </button>
        <button id="eraser">
          <img src="assets/images/eraserCursor.png" alt="" />
        </button>
        <button id="clear">X</button>
      </div>
    </div>
    <script src="assets/js/script.js"></script>
  </body>
</html>

javascript css

Answer 1

Answer №1

The issue you are facing is due to the mismatch in dimensions between your canvas and the HTML element that contains it. Your canvas has fixed width and height attributes, while the canvas element in your HTML has a width of 100%. This discrepancy means that the container's dimensions may vary but the canvas inside remains constant, leading to problems with accurately determining the clicked pixel.

You have two potential solutions:

Option 1: Adjust click position accounting for canvas deformation

If you want your canvas to resize dynamically, calculate the actual position using a ratio formula. For instance, if your canvas is 100 pixels wide but its container is only 10 pixels wide, clicking at pixel 5 should result in a dot being drawn at pixel 50. Essentially, you need to multiply the position by the factor of size difference.

In your code, this adjustment would look something like this:

// In lines 33 and 34, multiply the offset by the ratio between canvas size and container size
const x2 = e.offsetX * (canvas.width / ctx.canvas.getBoundingClientRect().width);
const y2 = e.offsetY * (canvas.height / ctx.canvas.getBoundingClientRect().height);

Option #2: Prevent canvas deformation

To address this issue, remove the container class and the width:100% from your canvas CSS. This will cause the canvas to overflow and create a scrollbar, but the pixel positions will be calculated correctly within your code.

Answer 2

The issue you are facing is due to the mismatch in dimensions between your canvas and the HTML element that contains it. Your canvas has fixed width and height attributes, while the canvas element in your HTML has a width of 100%. This discrepancy means that the container's dimensions may vary but the canvas inside remains constant, leading to problems with accurately determining the clicked pixel.

You have two potential solutions:

Option 1: Adjust click position accounting for canvas deformation

If you want your canvas to resize dynamically, calculate the actual position using a ratio formula. For instance, if your canvas is 100 pixels wide but its container is only 10 pixels wide, clicking at pixel 5 should result in a dot being drawn at pixel 50. Essentially, you need to multiply the position by the factor of size difference.

In your code, this adjustment would look something like this:

// In lines 33 and 34, multiply the offset by the ratio between canvas size and container size
const x2 = e.offsetX * (canvas.width / ctx.canvas.getBoundingClientRect().width);
const y2 = e.offsetY * (canvas.height / ctx.canvas.getBoundingClientRect().height);

Option #2: Prevent canvas deformation

To address this issue, remove the container class and the width:100% from your canvas CSS. This will cause the canvas to overflow and create a scrollbar, but the pixel positions will be calculated correctly within your code.

Why are my cursor and my drawing line on opposite sides?

Answer №1

Similar questions

Mastering the Rejection of Promises in Javascript with Graceful Elegance

If the <option> "anyTableName" </option> is chosen, then display the column names of the selected table (PHP, MySQL)

How to declare a variable using new String() and s = '' in Typescript/Javascript

Insert fresh user information into the div

Is it possible to alter the state of a controlled value in React without relying on the setValue function?

Having trouble accessing JSON file again: "Encountered unexpected end of input error"

Attempting to implement Vue js extensions without relying on NPM or webpack

How can I align the isometric camera in THREE.js to the center of a cube?

Obtain the value of v-model in a child component within VueJS

Troubleshooting issues with AngularJS $watch not triggering properly

Is it possible to retrieve values from my model when working with Django Templates and incorporating them in the JavaScript header?

mongojs implementation that allows for asynchronous query execution without blocking

Retrieve the string data from a .txt document

Listening to LayersControl.Overlay checkbox clicks in React-Leaflet: A guide

Tips on retrieving an input value from a dynamic list

Issue with Material-UI DataGrid Component: Unable to access property 'length' as it is undefined

Looking to prevent editing on a paragraph tag within CKEditor? Simply add contentEditable=false to the

Ensure that the icon at the conclusion of the <p> tag remains intact and does not break off on its

Tips on eliminating the gap between the dropdown menu in Firefox browser

Identifying with a jQuery IF statement all input fields that contain null values in order to eliminate the respective elements