Using Various Interactive Canvases with HTML5

Question

Using Various Interactive Canvases with HTML5

I am currently working on a website project that requires multiple canvases to encircle individual images.

After experimenting with HTML, CSS, and JS on JSfiddle, I successfully achieved the desired effect with a single image. However, when I duplicated the HTML code, the second canvas was not created (or perhaps it overlapped with the first one?)

Link to the JSfiddle

How can I modify the code so that each image has its own corresponding canvas?

  var canvas = document.getElementById('border');
      var context = canvas.getContext('2d');
      var x = 58;
      var y = 58;
      var radius = 55;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 3;

      // line color
      context.strokeStyle = '#ebebeb';
      context.stroke();
      
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      
      context.lineWidth = 4;
      context.strokeStyle = '#8aff92';
      context.stroke();

.pkmn 
{
position: relative;
  display: inline-block;
  margin: 5px;
  width: 116px;
  height: 116px;
}

.pkmn .sprite
{
padding: 5px;
position: relative;
    top: 5px;
    left: 5px;
    z-index: -1;
}

// Remaining CSS styles skipped for brevity

<div class="pkmn">
    <canvas id="border" class="exp" width="115" height="115"></canvas>

    <div class="lvl">95</div>
    
    <img alt="test" src="http://cdn.bulbagarden.net/upload/7/76/Spr_5b_143_s.png" class="sprite">
    <img alt="item" src="http://cdn.bulbagarden.net/upload/0/0f/Bag_Leftovers_Sprite.png" class="item">
    <img alt="crown" src="http://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" class="crown">
    <img alt="star" src="http://cdn.bulbagarden.net/upload/2/27/ShinyVIStar.png" class="star">
    <img alt="heart" src="http://i1055.photobucket.com/albums/s519/impojr/heart_zpsdaihll9m.png" class="heart">
</div>

// Second set of HTML elements for another image and canvas

javascript css html canvas

Answer 1

Answer №1

Attention: Quirky Mode Warning!

Avoid using duplicate ID's as this can significantly slow down your page and lead to unexpected behavior when the browser switches to quirks mode.

I am providing this answer to emphasize the importance of this issue, especially since the existing answer contains another problematic piece of code.

for (var i = 0; i < document.querySelectorAll('.border').length; i++) {  
      var canvas = document.querySelectorAll('#border')[i];

The above code performs two separate document queries for each item found by the query, which could drastically impact the performance of your page on lower-end devices with just a few matching elements.

const canvases = document.querySelectorAll('.exp')
for (var i = 0; i < canvases.length; i++) { 
      var canvas = canvases[i];
      var context = canvas.getContext('2d');
      var x = 58;
      var y = 58;
      var radius = 55;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 3;

      // line color
      context.strokeStyle = '#ebebeb';
      context.stroke();
      
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      
      context.lineWidth = 4;
      context.strokeStyle = '#8aff92';
      context.stroke();
}

.pkmn 
{
position: relative;
  display: inline-block;
  margin: 5px;
  width: 116px;
  height: 116px;
}

.pkmn .sprite
{
padding: 5px;
position: relative;
    top: 5px;
    left: 5px;
    z-index: -1;
}

/* More CSS styling rules go here */

<div class="pkmn">
    <canvas id="border1" class="exp" width="115" height="115"></canvas>

    <div class="lvl">95</div>
    
    <img alt="test" src="http://example.com/image.png" class="sprite">
    <img alt="item" src="http://example.com/item.png" class="item">
    <img alt="crown" src="http://example.com/crown.png" class="crown">
    <img alt="star" src="http://example.com/star.png" class="star">
    <img alt="heart" src="http://example.com/heart.png" class="heart">
</div>

<div class="pkmn">
    <canvas id="border2" class="exp" width="115" height="115"></canvas>

    <div class="lvl">95</div>
    
    <img alt="test" src="http://example.com/image.png" class="sprite">
    <img alt="item" src="http://example.com/item.png" class="item">
    <img alt="crown" src="http://example.com/crown.png" class="crown">
    <img alt="star" src="http://example.com/star.png" class="star">
    <img alt="heart" src="http://example.com/heart.png" class="heart">
</div>

Answer 2

Attention: Quirky Mode Warning!

Avoid using duplicate ID's as this can significantly slow down your page and lead to unexpected behavior when the browser switches to quirks mode.

I am providing this answer to emphasize the importance of this issue, especially since the existing answer contains another problematic piece of code.

for (var i = 0; i < document.querySelectorAll('.border').length; i++) {  
      var canvas = document.querySelectorAll('#border')[i];

The above code performs two separate document queries for each item found by the query, which could drastically impact the performance of your page on lower-end devices with just a few matching elements.

const canvases = document.querySelectorAll('.exp')
for (var i = 0; i < canvases.length; i++) { 
      var canvas = canvases[i];
      var context = canvas.getContext('2d');
      var x = 58;
      var y = 58;
      var radius = 55;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 3;

      // line color
      context.strokeStyle = '#ebebeb';
      context.stroke();
      
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      
      context.lineWidth = 4;
      context.strokeStyle = '#8aff92';
      context.stroke();
}

.pkmn 
{
position: relative;
  display: inline-block;
  margin: 5px;
  width: 116px;
  height: 116px;
}

.pkmn .sprite
{
padding: 5px;
position: relative;
    top: 5px;
    left: 5px;
    z-index: -1;
}

/* More CSS styling rules go here */

<div class="pkmn">
    <canvas id="border1" class="exp" width="115" height="115"></canvas>

    <div class="lvl">95</div>
    
    <img alt="test" src="http://example.com/image.png" class="sprite">
    <img alt="item" src="http://example.com/item.png" class="item">
    <img alt="crown" src="http://example.com/crown.png" class="crown">
    <img alt="star" src="http://example.com/star.png" class="star">
    <img alt="heart" src="http://example.com/heart.png" class="heart">
</div>

<div class="pkmn">
    <canvas id="border2" class="exp" width="115" height="115"></canvas>

    <div class="lvl">95</div>
    
    <img alt="test" src="http://example.com/image.png" class="sprite">
    <img alt="item" src="http://example.com/item.png" class="item">
    <img alt="crown" src="http://example.com/crown.png" class="crown">
    <img alt="star" src="http://example.com/star.png" class="star">
    <img alt="heart" src="http://example.com/heart.png" class="heart">
</div>

Answer 3

Answer №2

Implement a for loop to iterate through all elements with the id "border". Here is the updated code:

for (var i = 0; i < document.querySelectorAll('#border').length; i++) { 
      var canvas = document.querySelectorAll('#border')[i];
      var context = canvas.getContext('2d');
      var x = 58;
      var y = 58;
      var radius = 55;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 3;

      // line color
      context.strokeStyle = '#ebebeb';
      context.stroke();
      
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      
      context.lineWidth = 4;
      context.strokeStyle = '#8aff92';
      context.stroke();
}

.pkmn 
{
position: relative;
  display: inline-block;
  margin: 5px;
  width: 116px;
  height: 116px;
}

.pkmn .sprite
{
padding: 5px;
position: relative;
    top: 5px;
    left: 5px;
    z-index: -1;
}

.pkmn .lvl
{
font-family: 'Courier New Regular', sans-serif;
font-size: 30px;
z-index: 100;
position: absolute;
    margin-top:0;
}

.pkmn .crown
{
  position: absolute;
  left: 44px;
  bottom: 9px;
}

.pkmn .item
{
  position: absolute;
  left: 10px;
  bottom: 12px;
}

.pkmn .star
{
  position: absolute;
  right: 30px;
  top: 14px;
}

.pkmn .heart {
  position: absolute;
  right: 10px;
  top: 40px;
}

.pkmn .exp {
  position: absolute;
  display: inline-block;
}

<div class="pkmn">
    <canvas id="border" class="exp" width="115" height="115"></canvas>

    <div class="lvl">95</div>
    
    <img alt="test" src="http://cdn.bulbagarden.net/upload/7/76/Spr_5b_143_s.png" class="sprite">
    <img alt="item" src="http://cdn.bulbagarden.net/upload/0/0f/Bag_Leftovers_Sprite.png" class="item">
    <img alt="crown" src="http://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" class="crown">
    <img alt="star" src="http://cdn.bulbagarden.net/upload/2/27/ShinyVIStar.png" class="star">
    <img alt="heart" src="http://i1055.photobucket.com/albums/s519/impojr/heart_zpsdaihll9m.png" class="heart">
</div>

<div class="pkmn">
    <canvas id="border" class="exp" width="115" height="115"></canvas>

    <div class="lvl">95</div>
    
    <img alt="test" src="http://cdn.bulbagarden.net/upload/7/76/Spr_5b_143_s.png" class="sprite">
    <img alt="item" src="http://cdn.bulbagarden.net/upload/0/0f/Bag_Leftovers_Sprite.png" class="item">
    <img alt="crown" src="http://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" class="crown">
    <img alt="star" src="http://cdn.bulbagarden.net/upload/2/27/ShinyVIStar.png" class="star">
    <img alt="heart" src="http://i1055.photobucket.com/albums/s519/impojr/heart_zpsdaihll9m.png" class="heart">
</div>

Retrieve all elements with the id "border" using document.querySelectorAll().

Answer 4

Implement a for loop to iterate through all elements with the id "border". Here is the updated code:

for (var i = 0; i < document.querySelectorAll('#border').length; i++) { 
      var canvas = document.querySelectorAll('#border')[i];
      var context = canvas.getContext('2d');
      var x = 58;
      var y = 58;
      var radius = 55;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 3;

      // line color
      context.strokeStyle = '#ebebeb';
      context.stroke();
      
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      
      context.lineWidth = 4;
      context.strokeStyle = '#8aff92';
      context.stroke();
}

.pkmn 
{
position: relative;
  display: inline-block;
  margin: 5px;
  width: 116px;
  height: 116px;
}

.pkmn .sprite
{
padding: 5px;
position: relative;
    top: 5px;
    left: 5px;
    z-index: -1;
}

.pkmn .lvl
{
font-family: 'Courier New Regular', sans-serif;
font-size: 30px;
z-index: 100;
position: absolute;
    margin-top:0;
}

.pkmn .crown
{
  position: absolute;
  left: 44px;
  bottom: 9px;
}

.pkmn .item
{
  position: absolute;
  left: 10px;
  bottom: 12px;
}

.pkmn .star
{
  position: absolute;
  right: 30px;
  top: 14px;
}

.pkmn .heart {
  position: absolute;
  right: 10px;
  top: 40px;
}

.pkmn .exp {
  position: absolute;
  display: inline-block;
}

<div class="pkmn">
    <canvas id="border" class="exp" width="115" height="115"></canvas>

    <div class="lvl">95</div>
    
    <img alt="test" src="http://cdn.bulbagarden.net/upload/7/76/Spr_5b_143_s.png" class="sprite">
    <img alt="item" src="http://cdn.bulbagarden.net/upload/0/0f/Bag_Leftovers_Sprite.png" class="item">
    <img alt="crown" src="http://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" class="crown">
    <img alt="star" src="http://cdn.bulbagarden.net/upload/2/27/ShinyVIStar.png" class="star">
    <img alt="heart" src="http://i1055.photobucket.com/albums/s519/impojr/heart_zpsdaihll9m.png" class="heart">
</div>

<div class="pkmn">
    <canvas id="border" class="exp" width="115" height="115"></canvas>

    <div class="lvl">95</div>
    
    <img alt="test" src="http://cdn.bulbagarden.net/upload/7/76/Spr_5b_143_s.png" class="sprite">
    <img alt="item" src="http://cdn.bulbagarden.net/upload/0/0f/Bag_Leftovers_Sprite.png" class="item">
    <img alt="crown" src="http://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" class="crown">
    <img alt="star" src="http://cdn.bulbagarden.net/upload/2/27/ShinyVIStar.png" class="star">
    <img alt="heart" src="http://i1055.photobucket.com/albums/s519/impojr/heart_zpsdaihll9m.png" class="heart">
</div>

Retrieve all elements with the id "border" using document.querySelectorAll().

Using Various Interactive Canvases with HTML5

Answer №1

Attention: Quirky Mode Warning!

Answer №2

Similar questions

CSS - Display property not behaving as expected with an image tag

AFRAME - Enhanced scene overlay

Ways to transfer a jQuery variable value to a PHP variable

Issue with MaterialUI value prop not updating after dynamic rendering of components when value state changes

Display data fetched from concurrent Ajax calls in a React Component

Tips for delaying a node api's execution until a database query no longer returns null

Guide to using JavaScript to populate the dropdown list in ASP

Why isn't the card positioned in the center of the screen?

Issues with the collapsed navigation button not functioning properly on mobile devices with a Twitter Bootstrap layout

Is it necessary to integrate the Facebook JavaScript SDK even if I do not plan on utilizing its features?

What makes table layouts load pages more quickly?

Row in Bootstrap 3 fails to display correctly on medium-sized devices

Troubleshooting GLSL scripts within a web-based WebGL environment

Eliminate the initial padding in an everlasting horizontal CSS animation

"Click to view the latest data visualization using the Chart.js

Invoke a function within the React library through ReactDOM.render

Ensure that the width of the inner table matches the width of its contents within an overflowing div

State update failing to modify arrays

How can I retrieve the checked values of checkboxes and store them in an array using React?

Choose a specific field from a Django filter option