두 가지 최고의 경쟁자가 있습니다.

1. 1 × 1 이미지 데이터를 생성하고 색상을 설정 putImageData하고 위치를 지정하십시오.

   var id = myContext.createImageData(1,1); // only do this once per page
   var d  = id.data;                        // only do this once per page
   d[0]   = r;
   d[1]   = g;
   d[2]   = b;
   d[3]   = a;
   myContext.putImageData( id, x, y );     

2. fillRect()픽셀을 그리는 데 사용 합니다 (별칭 문제가 없어야 함).

   ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
   ctx.fillRect( x, y, 1, 1 );

http://jsperf.com/setting-canvas-pixel/9 또는 https://www.measurethat.net/Benchmarks/Show/1664/1 에서 속도를 테스트 할 수 있습니다.

최대 속도를 원하는 브라우저에 대해 테스트하는 것이 좋습니다. 2017 년 7 월 현재 fillRect()Firefox v54 및 Chrome v59 (Win7x64)에서 5-6 배 더 빠릅니다.

다른 대안은 다음과 같습니다.

• 사용하여 getImageData()/putImageData()전체 캔버스에; 다른 옵션보다 약 100 배 느립니다.

• 데이터 URL을 사용하여 사용자 지정 이미지를 만들고 drawImage()이를 사용 하여 표시 :

  var img = new Image;
  img.src = "data:image/png;base64," + myPNGEncoder(r,g,b,a);
  // Writing the PNGEncoder is left as an exercise for the reader

• 원하는 모든 픽셀로 채워진 다른 이미지 나 캔버스를 만들고 원하는 픽셀 drawImage()만 블리 팅 하는 데 사용 합니다. 아마도 매우 빠를 것이지만 필요한 픽셀을 미리 계산해야하는 한계가 있습니다.

내 테스트는 캔버스 컨텍스트를 저장 및 복원하지 않습니다 fillStyle. fillRect()성능 이 저하 될 수 있습니다. 또한 깨끗한 슬레이트로 시작하거나 각 테스트에 대해 정확히 동일한 픽셀 세트를 테스트하지 않습니다.

답변

  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var canvasWidth = canvas.width;
  var canvasHeight = canvas.height;
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  var id = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
  var pixels = id.data;

    var x = Math.floor(Math.random() * canvasWidth);
    var y = Math.floor(Math.random() * canvasHeight);
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    var off = (y * id.width + x) * 4;
    pixels[off] = r;
    pixels[off + 1] = g;
    pixels[off + 2] = b;
    pixels[off + 3] = 255;

  ctx.putImageData(id, 0, 0);

function setPixel(imageData, x, y, r, g, b, a) {
    var index = 4 * (x + y * imageData.width);
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
}

function point(x, y, canvas){
  canvas.beginPath();
  canvas.moveTo(x, y);
  canvas.lineTo(x+1, y+1);
  canvas.stroke();
}

function point(x, y, canvas){
  canvas.strokeRect(x,y,1,1);
}

function point(x, y, canvas){
  canvas.fillRect(x,y,1,1);
}

function point(x, y, canvas){
  canvas.beginPath();
  canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
  canvas.stroke();
}

function point(x, y, canvas){
  canvas.beginPath();
  canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
  canvas.fill();
}