Top community members
All Wiki Articles Create Wiki Article

In the past we had a dream,
to have place where we could share IT knowledge,
to ask questions without fear that someone will judge us.

Now we are a group of people who make this dream come true. ❤ 💻

If you think sharing knowledge and helping other is valuable.

join our community - Click here

JavaScript - how to draw pixel on canvas element?

0 contributions
4 points

Using JavaScript canvas element it is not possible to access single pixel, but there are some tricks how to do it. In this article simple approaches have been presented.

1. Drawing single pixel with fillRect() method example

This approach is useful when we want to draw single pixels on existing drawing.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    #my-canvas { border: 1px solid gray; }
    
  </style>
</head>
<body>
  <canvas id="my-canvas" width="200" height="200"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    function drawPixel(x, y, color) {
      	// to decrease smoothing for numbers with decimal part
		var roundedX = Math.round(x);
        var roundedY = Math.round(y);
  
        context.beginPath();
        context.fillStyle = color || '#000';
      	context.fillRect(roundedX, roundedY, 1, 1);
        context.fill();
    }
    
    var colors = ['red', 'blue', 'orange', 'yellow', 'brown', 'green'];

    var t1 = new Date();

    for(var i = 0; i < 10000; ++i) {
      	var x = canvas.width * Math.random();
      	var y = canvas.height * Math.random();
      	var color = colors[i % colors.length];
      
    	drawPixel(x, y, color);
    }
    
    var t2 = new Date();
    var dt = t2 - t1;
    
    console.log('elapsed time = ' + dt + ' ms');

  </script>
</body>
</html>

2. putImageData method with single pixel class example

This approach is useful when we want to draw single pixels on existing drawing.

Note: this solution has weak perfomrance.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    #my-canvas { border: 1px solid gray; }
    
  </style>
</head>
<body>
  <canvas id="my-canvas" width="200" height="200"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    // to increase performance createImageData method 
    // should be executed once e.g. before drawing
    var image = context.createImageData(1, 1); // pixel image
	var data = image.data;

    function drawPixel(x, y, color) {
      	data[0] = color.r;
        data[1] = color.g;
        data[2] = color.b;
        data[3] = color.a;
      
        context.putImageData(image, x, y);
    }
    
    var colors = [
      	{r: 255, g:   0, b:   0, a: 255}, // red
      	{r:   0, g: 255, b:   0, a: 255}, // green
      	{r:   0, g:   0, b: 255, a: 255}, // blue
    ];

    var t1 = new Date();

    for(var i = 0; i < 10000; ++i) {
      	var x = canvas.width * Math.random();
      	var y = canvas.height * Math.random();
      	var color = colors[i % colors.length];
      
    	drawPixel(x, y, color);
    }
    
    var t2 = new Date();
    var dt = t2 - t1;
    
    console.log('elapsed time = ' + dt + ' ms');

  </script>
</body>
</html>

3. putImageData method with double buffering example

This approach is useful when we want to draw everything by own.

Note: this solution has very good perfomrance.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    #my-canvas { border: 1px solid gray; }
    
  </style>
</head>
<body>
  <canvas id="my-canvas" width="200" height="200"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    // to increase performance createImageData method 
    // should be executed once e.g. before drawing
    var image = context.createImageData(canvas.width, canvas.height);
	var data = image.data;

    function drawPixel(x, y, color) {
      	var roundedX = Math.round(x);
      	var roundedY = Math.round(y);
      
      	var index = 4 * (canvas.width * roundedY + roundedX);
      
      	data[index + 0] = color.r;
        data[index + 1] = color.g;
        data[index + 2] = color.b;
        data[index + 3] = color.a;
    }
    
    function swapBuffer() {
    	context.putImageData(image, 0, 0);
    }
    
    var colors = [
      	{r: 255, g:   0, b:   0, a: 255}, // red
      	{r:   0, g: 255, b:   0, a: 255}, // green
      	{r:   0, g:   0, b: 255, a: 255}, // blue
    ];

    var t1 = new Date();
	
    for(var i = 0; i < 10000; ++i) {
      	var x = canvas.width * Math.random();
      	var y = canvas.height * Math.random();
      	var color = colors[i % colors.length];
      
    	drawPixel(x, y, color);
    }
    
    swapBuffer();
    
    var t2 = new Date();
    var dt = t2 - t1;
    
    console.log('elapsed time = ' + dt + ' ms');

  </script>
</body>
</html>

 

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more