Question

How to draw random pixels with random colors in browser with JavaScript

Answer 1

var canvas = document.createElement("canvas");
canvas.setAttribute("width", window.innerWidth);
canvas.setAttribute("height", window.innerHeight);
document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");
var i;

for (i = 0; i < 500; i++)
     ctx.fillRect(Math.random() * 600, Math.random() * 600, 1, 1);

            
/*
run:
  
draw 500 random pixels
  
*/

 

70+ SQL courses for beginners and professionals

Answer 2

var canvas = document.createElement("canvas");
canvas.setAttribute("width", window.innerWidth);
canvas.setAttribute("height", window.innerHeight);
document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");
var i;

ctx.fillStyle = "rgb(0, 0, 255)";  // blue

for (i = 0; i < 500; i++)
     ctx.fillRect(Math.random() * 600, Math.random() * 600, 1, 1);

            
/*
run:
  
draw 500 random blue pixels
  
*/

 

70+ SQL courses for beginners and professionals

Answer 3

var canvas = document.createElement("canvas");
canvas.setAttribute("width", window.innerWidth);
canvas.setAttribute("height", window.innerHeight);
document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");
var i;

var max = 255
var min = 1;

for (i = 0; i < 700; i++)
{
    var r = Math.floor(Math.random() * (max - min + 1)) + min;
    var g = Math.floor(Math.random() * (max - min + 1)) + min;
    var b = Math.floor(Math.random() * (max - min + 1)) + min;
    
    ctx.fillStyle = "rgb(" + r + ',' + g + ',' + b + ")";  
    ctx.fillRect(Math.random() * 600, Math.random() * 600, 1, 1);
} 

            
/*
run:

draw 700 random pixels with random colors
  
*/

 

70+ SQL courses for beginners and professionals