Question

How to draw random rectangle at random position with random color to on canvas in JavaScript

Answer 1

<canvas id="canvas" width="1024" height="600"></canvas>

<script type="text/JavaScript">   

var ctx = document.getElementById('canvas').getContext('2d');
  
// context.fillRect(x, y, width, height);

var r = Math.floor((Math.random() * 256));
var g = Math.floor((Math.random() * 256));
var b = Math.floor((Math.random() * 256));  
  
var x = Math.floor((Math.random() * 20) + 1);
var y = Math.floor((Math.random() * 20) + 1);
var width = Math.floor((Math.random() * 400) + 100);
var height = Math.floor((Math.random() * 300) + 100);

ctx.fillStyle = 'rgb(' + r + ',' + g + ', ' + b + ')';
ctx.fillRect(x, y, width, height);
 

</script>

 

70+ SQL courses for beginners and professionals

Answer 2

<canvas id="canvas" width="1024" height="600"></canvas>

<script type="text/JavaScript">   

var ctx = document.getElementById('canvas').getContext('2d');
  
// context.fillRect(x, y, width, height);

for (var i = 0; i < 30; i++)
{
    var r = Math.floor((Math.random() * 256));
    var g = Math.floor((Math.random() * 256));
    var b = Math.floor((Math.random() * 256));  
      
    var x = Math.floor((Math.random() * 200) + 1);
    var y = Math.floor((Math.random() * 200) + 1);
    var width = Math.floor((Math.random() * 900) + 100);
    var height = Math.floor((Math.random() * 700) + 100);

    ctx.fillStyle = 'rgb(' + r + ',' + g + ', ' + b + ')';
    ctx.fillRect(x, y, width, height);
}
 

</script>

 

70+ SQL courses for beginners and professionals