The canvas is either displayed solely on the first image of the slider or attached to the bottom of every image

Question

The canvas is either displayed solely on the first image of the slider or attached to the bottom of every image

While attempting to implement a feature where clicking on an image would draw a circle on a canvas overlaying it, I encountered an issue. When applying

cnvs.style.position = 'absolute';

, all canvas elements stack on top of each other instead of being overlaid on their respective images. If I click on multiple images, the circle is only drawn on the first image. Conversely, if I remove

cnvs.style.position = 'absolute';

, the canvas connects to the bottom of the image instead of overlaying it. My goal is to ensure that each canvas and image are properly overlaid so that clicking on any image displays a circle. This seems to be a CSS-related problem that I'm struggling to resolve.

document.body.onload = addElement;

      function addElement() {
            
            // image path
            const imagePath = ['https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2F8%2F84%2FAssociation_of_Gay_and_Lesbian_Psychiatrists_logo.jpg&f=1&nofb=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fstatic01.nyt.com%2Fnewsgraphics%2F2016%2F07%2F14%2Fpluto-one-year%2Fassets%2Ficon-pluto.png&f=1&nofb=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.oFxADNN67dYP-ke5xg7HbQHaHG%26pid%3DApi&f=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.glassdoor.com%2Fsqll%2F1065746%2Felevation-church-squarelogo-1453223965790.png&f=1&nofb=1'];

            for (const image of imagePath) {

                  var slice = image.slice(26, 34);
                  var id = image;
                  var hdnName = document.getElementById("sendServ"); 

                  const img = document.createElement("img");
                  img.src = image;
                  img.classList.add("new");
                  img.id = slice;

                  const cnvs = document.createElement("canvas");
                  cnvs.classList.add("suiteiCanvas");

                  cnvs.style.left = img.offsetLeft + "px";
                  cnvs.style.top = img.offsetTop + "px";
                  cnvs.style.display = 'none';

                  var ctx = cnvs.getContext("2d");
                  ctx.clearRect(0, 0, cnvs.width, cnvs.height);
                  ctx.beginPath();
                  ctx.arc(100, 75, 50, 0, 2 * Math.PI, false);
                  ctx.lineWidth = 15;
                  ctx.strokeStyle = '#FF0000';
                  ctx.stroke();

                  var div = document.createElement("div");
                  var div1 = document.createElement("div");
                  div.id = id;
                  div1.id = '1';
                  div.classList.add("image");


                  img.onclick = function draw() {
                        cnvs.style.display = '';
                        hdnName.value = img.id;
                  };

                  cnvs.onclick = function remove() {
                        cnvs.style.display = 'none';
                        hdnName.value = null;
                  };

                  document.getElementById('suitei-slider').appendChild(div);

                  document.getElementById(image).appendChild(img);
                  document.getElementById(image).appendChild(cnvs);


            }
      }

// slick slider

canvas.suiteiCanvas{
  height: auto; 
  width: auto;
  
max-height: 200px;
max-width: 150px;

margin-left: 100px; 
margin-right: 100px;
border:3px solid rgb(20, 11, 11);
}

#draw-btn {
  font-size: 14px;
  padding: 2px 16px 3px 16px;
  margin-bottom: 8px;
}

img.new {


  height: auto; 
  width: auto;

max-height: 200px;
max-width: 150px;

margin-left: 100px; 
margin-right: 100px;
border:3px solid rgb(20, 11, 11);
  
}

<div class="multiple-items" id="suitei-slider"></div>
<input type="hidden" id="sendServ">

javascript html css canvas

Answer 1

Answer №1

To ensure that your canvases are properly positioned within a container, it is essential to set them in position: absolute inside a container with position: relative. This way, the canvases remain contained within the container without overlapping. Although the containers themselves are not in position: absolute, their content may overlap, causing your canvases to overlay with the images.

Additionally, you may need to center your canvases by setting their dimensions (which can be hard coded for now) and fixing the x position of the circle.

I hope this information aligns with what you were seeking.

document.body.onload = addElement;

      function addElement() {
            
            // image path
            const imagePath = ['https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2F8%2F84%2FAssociation_of_Gay_and_Lesbian_Psychiatrists_logo.jpg&f=1&nofb=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fstatic01.nyt.com%2Fnewsgraphics%2F2016%2F07%2F14%2Fpluto-one-year%2Fassets%2Ficon-pluto.png&f=1&nofb=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.oFxADNN67dYP-ke5xg7HbQHaHG%26pid%3DApi&f=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.glassdoor.com%2Fsqll%2F1065746%2Felevation-church-squarelogo-1453223965790.png&f=1&nofb=1'];
            
            for (const image of imagePath) {
                  // get the item id of an image
                  var slice = image.slice(26, 34);
                  var id = image;
                  var hdnName = document.getElementById("sendServ"); 

                  const img = document.createElement("img");
                  img.src = image;
                  img.classList.add("new");
                  img.id = slice;

                  const cnvs = document.createElement("canvas");
                  cnvs.classList.add("suiteiCanvas");
                 
                 // cnvs.style.position = 'absolute';
                  cnvs.style.left = img.offsetLeft + "px";
                  cnvs.style.top = img.offsetTop + "px";
                  cnvs.style.display = 'none';
                  cnvs.width = 150;
                  cnvs.height = 150;

                  var ctx = cnvs.getContext("2d");
                  ctx.clearRect(0, 0, cnvs.width, cnvs.height);
                  ctx.beginPath();
                  ctx.arc(75, 75, 50, 0, 2 * Math.PI, false);
                  ctx.lineWidth = 15;
                  ctx.strokeStyle = '#FF0000';
                  ctx.stroke();

                  var div = document.createElement("div");
                  var div1 = document.createElement("div");
                  div.id = id;
                  div1.id = '1';
                  div.classList.add("image");


                  img.onclick = function draw() {
                        cnvs.style.display = '';
                        hdnName.value = img.id;
                  };

                  cnvs.onclick = function remove() {
                        cnvs.style.display = 'none';
                        hdnName.value = null;
                  };

                  document.getElementById('suitei-slider').appendChild(div);
               
                  document.getElementById(image).appendChild(img);
                  document.getElementById(image).appendChild(cnvs);
               
               
            }
      }
      
// slick slider

.image {
  position: relative; /* add this */
  user-select: none; /* and this maybe */
}

canvas.suiteiCanvas{
  height: auto; 
  width: auto;
  height: 150px;
  max-width: 150px;
  /*margin-left: 100px; 
  margin-right: 100px;*/
  border:3px solid rgb(20, 11, 11);
  position: absolute; /* add this */
}

#draw-btn {
  font-size: 14px;
  padding: 2px 16px 3px 16px;
  margin-bottom: 8px;
}

img.new { 
  height: auto; 
  width: auto;
  max-height: 200px;
  max-width: 150px;
  /*margin-left: 100px; 
  margin-right: 100px;*/
  border:3px solid rgb(20, 11, 11);
  
}

<div class="multiple-items" id="suitei-slider"></div>
<input type="hidden" id="sendServ">

Answer 2

To ensure that your canvases are properly positioned within a container, it is essential to set them in position: absolute inside a container with position: relative. This way, the canvases remain contained within the container without overlapping. Although the containers themselves are not in position: absolute, their content may overlap, causing your canvases to overlay with the images.

Additionally, you may need to center your canvases by setting their dimensions (which can be hard coded for now) and fixing the x position of the circle.

I hope this information aligns with what you were seeking.

document.body.onload = addElement;

      function addElement() {
            
            // image path
            const imagePath = ['https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2F8%2F84%2FAssociation_of_Gay_and_Lesbian_Psychiatrists_logo.jpg&f=1&nofb=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fstatic01.nyt.com%2Fnewsgraphics%2F2016%2F07%2F14%2Fpluto-one-year%2Fassets%2Ficon-pluto.png&f=1&nofb=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.oFxADNN67dYP-ke5xg7HbQHaHG%26pid%3DApi&f=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.glassdoor.com%2Fsqll%2F1065746%2Felevation-church-squarelogo-1453223965790.png&f=1&nofb=1'];
            
            for (const image of imagePath) {
                  // get the item id of an image
                  var slice = image.slice(26, 34);
                  var id = image;
                  var hdnName = document.getElementById("sendServ"); 

                  const img = document.createElement("img");
                  img.src = image;
                  img.classList.add("new");
                  img.id = slice;

                  const cnvs = document.createElement("canvas");
                  cnvs.classList.add("suiteiCanvas");
                 
                 // cnvs.style.position = 'absolute';
                  cnvs.style.left = img.offsetLeft + "px";
                  cnvs.style.top = img.offsetTop + "px";
                  cnvs.style.display = 'none';
                  cnvs.width = 150;
                  cnvs.height = 150;

                  var ctx = cnvs.getContext("2d");
                  ctx.clearRect(0, 0, cnvs.width, cnvs.height);
                  ctx.beginPath();
                  ctx.arc(75, 75, 50, 0, 2 * Math.PI, false);
                  ctx.lineWidth = 15;
                  ctx.strokeStyle = '#FF0000';
                  ctx.stroke();

                  var div = document.createElement("div");
                  var div1 = document.createElement("div");
                  div.id = id;
                  div1.id = '1';
                  div.classList.add("image");


                  img.onclick = function draw() {
                        cnvs.style.display = '';
                        hdnName.value = img.id;
                  };

                  cnvs.onclick = function remove() {
                        cnvs.style.display = 'none';
                        hdnName.value = null;
                  };

                  document.getElementById('suitei-slider').appendChild(div);
               
                  document.getElementById(image).appendChild(img);
                  document.getElementById(image).appendChild(cnvs);
               
               
            }
      }
      
// slick slider

.image {
  position: relative; /* add this */
  user-select: none; /* and this maybe */
}

canvas.suiteiCanvas{
  height: auto; 
  width: auto;
  height: 150px;
  max-width: 150px;
  /*margin-left: 100px; 
  margin-right: 100px;*/
  border:3px solid rgb(20, 11, 11);
  position: absolute; /* add this */
}

#draw-btn {
  font-size: 14px;
  padding: 2px 16px 3px 16px;
  margin-bottom: 8px;
}

img.new { 
  height: auto; 
  width: auto;
  max-height: 200px;
  max-width: 150px;
  /*margin-left: 100px; 
  margin-right: 100px;*/
  border:3px solid rgb(20, 11, 11);
  
}

<div class="multiple-items" id="suitei-slider"></div>
<input type="hidden" id="sendServ">

Answer 3

Answer №2

For clarification, here is a cleaner version of the code with comments to explain each line. Your code seems a bit confusing; consider using functions more frequently for readability.

let index = 0;
const display = "table"; // or "grid" if horizontal
const x = 0;
const y = 0;
const images = {
  height: 50,
  width: 50,
  url: [
    'image_url_1',
    'image_url_2',
    'image_url_3',
    'image_url_4'
  ]
}

function createHTML() {
  console.log('E: Execute & R: Request & I: Informative');
  
  document.body.style.display = display;
  for (const image of images.url) {
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.id = 'option' + [index];
    canvas.height = images.height;
    canvas.width = images.width;
    canvas.style.padding = '10px';

    drawImages(canvas);

    canvas.addEventListener("click", optionClick, false);

    document.body.appendChild(canvas);
    index++;
  }
}

function drawImages(canvas) {
  
  const ctx = canvas.getContext('2d');
  const background = new Image();

  index = canvas.id.replace(/\D/g, '');

  background.src = images.url[index];
  
  background.onload = function() {
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
  }
}

function drawX(canvas) {
  const ctx = canvas.getContext('2d');

  console.log('E: Placing X on canvas ' + canvas.id);

  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(images.width, images.height);
  ctx.moveTo(images.height, 0);
  ctx.lineTo(0, images.width);
  ctx.closePath();
  ctx.stroke();
}

function clear(canvas) {
  console.log('E: clearing canvas ' + canvas.id);

  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

  drawImages(canvas);
}

function optionClick(e) {
  log = true;
  const canvas = document.getElementsByTagName('canvas');
  for (const option of canvas) {
    if (log) console.log('I: User clicked at option ' + e.target.id + ':' + option.id);
    log = false;
    if (e.target.id === option.id) {
      console.log('R: Drawing request at canvas ' + option.id);
      drawX(option);
    } else {
      console.log('R: Clearing request at canvas ' + option.id);
      clear(option);
    }
  }
}

window.onload = createHTML;

css_styles_here

<body></body>

Answer 4

For clarification, here is a cleaner version of the code with comments to explain each line. Your code seems a bit confusing; consider using functions more frequently for readability.

let index = 0;
const display = "table"; // or "grid" if horizontal
const x = 0;
const y = 0;
const images = {
  height: 50,
  width: 50,
  url: [
    'image_url_1',
    'image_url_2',
    'image_url_3',
    'image_url_4'
  ]
}

function createHTML() {
  console.log('E: Execute & R: Request & I: Informative');
  
  document.body.style.display = display;
  for (const image of images.url) {
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.id = 'option' + [index];
    canvas.height = images.height;
    canvas.width = images.width;
    canvas.style.padding = '10px';

    drawImages(canvas);

    canvas.addEventListener("click", optionClick, false);

    document.body.appendChild(canvas);
    index++;
  }
}

function drawImages(canvas) {
  
  const ctx = canvas.getContext('2d');
  const background = new Image();

  index = canvas.id.replace(/\D/g, '');

  background.src = images.url[index];
  
  background.onload = function() {
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
  }
}

function drawX(canvas) {
  const ctx = canvas.getContext('2d');

  console.log('E: Placing X on canvas ' + canvas.id);

  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(images.width, images.height);
  ctx.moveTo(images.height, 0);
  ctx.lineTo(0, images.width);
  ctx.closePath();
  ctx.stroke();
}

function clear(canvas) {
  console.log('E: clearing canvas ' + canvas.id);

  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

  drawImages(canvas);
}

function optionClick(e) {
  log = true;
  const canvas = document.getElementsByTagName('canvas');
  for (const option of canvas) {
    if (log) console.log('I: User clicked at option ' + e.target.id + ':' + option.id);
    log = false;
    if (e.target.id === option.id) {
      console.log('R: Drawing request at canvas ' + option.id);
      drawX(option);
    } else {
      console.log('R: Clearing request at canvas ' + option.id);
      clear(option);
    }
  }
}

window.onload = createHTML;

css_styles_here

<body></body>

The canvas is either displayed solely on the first image of the slider or attached to the bottom of every image

Answer №1

Answer №2

Similar questions

The functionality of displaying a loading image when the Upload button is clicked has encountered a glitch and

How to retrieve information from a pre-populated <textarea> using Google Maps script in AngularJS

Simulate a new Date object in Deno for testing purposes

Several different factors

jQuery load fails to fill select dropdown

The concealed [hidden] attribute in Angular2 triggers the display of the element after a brief delay

Clear the text in a textarea after submitting the form

Tips for assigning a unique identifier to an HTML tag using JavaScript

Embed the svg element within a specified class

eliminating list item from unordered list depending on the input of either first or last name

I'm having trouble getting the activeStyle to work properly with a <NavLink>

What is the best way to retrieve AJAX responses from JSON data that contains multiple sets of information

Nested loops iterating over an array of objects

Adjusting the repeating-linear-gradient CSS background

Implementing a basic marker clustering feature in the Google Maps application

Ensuring safe access to a Vue.js single-page application

Ways to detach event listener in Vue Component

Issues with AngularJS and UI-grid: the gridOptions are being overlooked by the grid

Exploring the world of web development with JavaScript and the randomization magic

Transmit JSON information from one webpage and dynamically retrieve it from another page via AJAX while both pages are active