Multiple html canvas element with random graphics on same page

Question

Trying to create multiple canvas element on a single html page and then draw different graphics on each of them . But the issue is , the same graphics is drawn on all of them without any randomization

    canvas_container_div = document.getElementById('canvas_container_div');

    let animation_frame_id;

    let canvas_array = [];
    let context_array = [];
    let number_of_canvas = 5;

    //creating canvas and storing it in an array
    for(var i = 0;i < number_of_canvas ; i++){

    var canvas1 = document.createElement('canvas');
    canvas1.style.width = '200px';
    canvas1.style.height = '200px';
    canvas1.style.margin = '10px';
    canvas1.style.border = '1px solid white';
    canvas_array.push(canvas1);
    
    }

    //displaying all canvas inside the div element
    for(var i = 0;i < canvas_array.length ; i++){
        canvas_container_div.appendChild(canvas_array[i]);  
    }

    //getting all the contex for all the canvas
    for(var i = 0;i < canvas_array.length ; i++){
        context_array.push(canvas_array[i].getContext('2d'));
    }

    //random values generating
    let hue = Math.random()*360;
    //or other radom parameters

    //updating each graphics
    function update(ctx){
      ctx.fillStyle = 'hsl('+hue+',100%,50%)';
    }


    function render(){

        //getting all the context   
        for(var i = 0;i < context_array.length ; i++){

            //clearing bg for perticular canvas
            context_array[i].clearRect(0,0,canvas_array[i].width,canvas_array[i].height);

            //passing perticular canvas context to update method
            update(context_array[i]);
            
            //drawing with pertucular context
            context_array[i].beginPath();
            context_array[i].arc(canvas_array[i].width/2,canvas_array[i].height/2,40,0,Math.PI *2);
            context_array[i].closePath();
            context_array[i].fill();

        }

        animation_frame_id = requestAnimationFrame(render);
    }


    render();

Wanted to have different color for all the circle drawn on different canvas , but all the circles are of same color . cannot randomize

The reason the circles are the same color is that you are defining the hue outside of your loop and you are passing the same hue to the function each time it runs within the for loop. — dale landry
– dale landry, Commented Oct 24, 2020 at 14:31

dale landry · Accepted Answer · 2020-10-24 15:02:51Z

You are defining your hue outside of your renders for loop, so each time it runs the loop and calls on the hue, it is getting the same color for the fill style. You could create a function that randomizes the hue inside a for loop to to create an array of colors that is the same length as your canvas array.

Then in your for loop within the render function call on the array and its index to make each individual circle a different color fill style.

NOTE: This only randomizes the colors, it does not check if a color already exists, so you may want additional code to check if a number is already in the array before pushing the value into the array. Furthermore, you will notice some hues randomize within a certain number close enough to each other that they actually look like they are the same, you could also include code within the setHue() function that checks to see if the the numbers are within a certain restraint of each other, this would likely be a .include() or even a conditional that checks the difference between the hue array and the current value within the loop.

let hue = [];
function setHue() {
  for (let h = 0; h < context_array.length; h++) {
    hue.push(Math.trunc(Math.random() * 360));
  }
}
setHue();

canvas_container_div = document.getElementById('canvas_container_div');

let animation_frame_id;

let canvas_array = [];
let context_array = [];
let number_of_canvas = 5;

//creating canvas and storing it in an array
for (var i = 0; i < number_of_canvas; i++) {

  var canvas1 = document.createElement('canvas');
  canvas1.style.width = '200px';
  canvas1.style.height = '200px';
  canvas1.style.margin = '10px';
  canvas1.style.border = '1px solid white';
  canvas_array.push(canvas1);

}

//displaying all canvas inside the div element
for (var i = 0; i < canvas_array.length; i++) {
  canvas_container_div.appendChild(canvas_array[i]);
}

//getting all the contex for all the canvas
for (var i = 0; i < canvas_array.length; i++) {
  context_array.push(canvas_array[i].getContext('2d'));
}

//Randomize your hue value and make an array to hold the value
//Then in your for loop within the render function call on the 
//array and its index to make each individual circle a different color fill style
let hue = [];

function setHue() {
  for (let h = 0; h < context_array.length; h++) {
    let color = Math.trunc(Math.random() * 360);

    hue.push(color);

  }
  console.log(hue);
}
setHue();

function render() {

  //getting all the context   
  for (var i = 0; i < context_array.length; i++) {

    //clearing bg for perticular canvas
    context_array[i].clearRect(0, 0, canvas_array[i].width, canvas_array[i].height);


    //drawing with particular context
    context_array[i].beginPath();
    context_array[i].arc(canvas_array[i].width / 2, canvas_array[i].height / 2, 40, 0, Math.PI * 2);
    context_array[i].closePath();
    context_array[i].fill();
    context_array[i].fillStyle = 'hsl(' + hue[i] + ',100%,50%)';

  }

  animation_frame_id = requestAnimationFrame(render);
}


render();

<div id="canvas_container_div"></div>

Collectives™ on Stack Overflow

Multiple html canvas element with random graphics on same page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related