how to find the class of parent div

Question

This the my current canvas size and its within col-sm-6. However I want to display bigger canvas if it is with in col-sm-12 bootstrap class and col-sm-6 and col-sm-12 are generated dynamically from backend so I have to know if the canvas is with in col-sm-6 or col-sm-12 so that I can set the smaller and bigger width to canvas

First smaller canvas: maybe 500*400

<div class="s-field col-sm-6">
    <label class="control-label mb5">first canvas image </label>
    <canvas  id="canvas-id-1" class="image-canvas"></canvas>
</div>

second should be bigger canvas : may be 800*400

<div class="s-field col-sm-12">
    <label class="control-label mb5">second canvas image </label>
    <canvas  id="canvas-id-2" class="image-canvas"></canvas>
</div>

let canvas = document.getElementById('canvas-id');
let ctx = canvas.getContext("2d");
//here if i know that canvas is within  class col-sm-12 I can set dimension 800*400
if (document.querySelector('.col-sm-12')) {
  canvas.width = 800;
  canvas.height = 400;
  //otherwise I will make small canvas 
} else {
  canvas.width = 500
  canvas.height =400
}

var image = new Image();
image.src = 'http://t2.gstatic.com/images?q=tbn:ANd9GcQQveW9AJCxOC8Phnq3vptJIxPFHlxNw63q4pudc66dM4O96vtm';
image.onload = function () {
  var ctx = canvas.getContext('2d');
  ctx.drawImage(image,
    canvas.width / 2 - image.width / 2,
    canvas.height / 2 - image.height / 2
  );
}

`if (document.querySelector('.col-sm-12'))` will be fulfilled, as soon as there is an element with that class _anywhere_ on the page, it doesn't necessarily mean that's wrapped around your canvas. Go up to the parent node first, and then check whether that has the class. https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode, https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/contains — CBroe, Sep 08 '21 at 06:18
But if the backend creates the column and the canvas element at the same time - then you could also just add the info you need to the canvas element itself, like via a custom data attribute. Then you can read it from that element directly, without having to navigate up first. — CBroe, Sep 08 '21 at 06:20
i did this to get col-sm-12 or col-sm-6 $(document).ready(function(){ alert(document.getElementById('canvas-id').parent().attr(".class")); // didn't work }); — David, Sep 08 '21 at 06:30
That's because you are mixing native DOM-, and jQuery syntax there. `getElementById` gets you the reference to an HTLMElement object, that is something different than a jQuery instance. If you really want to switch to jQuery now (but why, the code you had shown was vanilla JS so far), then use `$()` to select the element; else, use the DOM properties & methods I mentioned. — CBroe, Sep 08 '21 at 06:36
Could you make the code in your question into a working snippet as at the moment things don’t match - the ids of the canvases, are they really set differently? — A Haworth, Sep 08 '21 at 07:06

score 1 · Answer 1 · answered Sep 08 '21 at 07:11

1

You have a typo in your code: "cxt.drawImage" instead of "ctx.drawImage".

for (let canvas of document.querySelectorAll ('.image-canvas')) {
  let ctx = canvas.getContext("2d");
  if (canvas.parentNode.classList.contains('col-sm-12')) {
    canvas.width = 800;
    canvas.height = 400;
  } else {
    canvas.width = 500
    canvas.height = 400
  }
  let image = new Image();
  image.src = 'http://t2.gstatic.com/images?q=tbn:ANd9GcQQveW9AJCxOC8Phnq3vptJIxPFHlxNw63q4pudc66dM4O96vtm';
  image.onload = function () {
    ctx.drawImage (image,
      canvas.width / 2 - image.width / 2,
      canvas.height / 2 - image.height / 2
    );
  }
}

canvas {
  border: 1px solid black;
}

<div class="s-field col-sm-6">
    <label class="control-label mb5">first canvas image </label>
    <canvas  id="canvas-id-1" class="image-canvas"></canvas>
</div>

<div class="s-field col-sm-12">
    <label class="control-label mb5">second canvas image </label>
    <canvas  id="canvas-id-2" class="image-canvas"></canvas>
</div>

answered Sep 08 '21 at 07:11

ceving

21,900
13
104
178

Thanks @ceving, but I need a responsive canvas. when you make small browser the image inside the canvas are hidden. Is there a better solution to make it responsive based on browser width – David Sep 08 '21 at 10:36
maybe canvas.width = 800; canvas.height = 400; is creating problem – David Sep 08 '21 at 10:36
@David You have to use the [resize event](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event). – ceving Sep 08 '21 at 10:39
it would be great if you can show resize event in above code. Thanks – David Sep 08 '21 at 11:18
@David This is already [answered](https://stackoverflow.com/questions/1664785/resize-html5-canvas-to-fit-window). Alternatively you can use the [Viewport-percentage lengths](https://developer.mozilla.org/en-US/docs/Web/CSS/length) to style your canvas. See [here](https://stackoverflow.com/a/16764896/402322) for an example. – ceving Sep 08 '21 at 11:29

how to find the class of parent div

1 Answers1