¿Cuál es la mejor manera de establecer un solo píxel en un lienzo HTML5?

HTML5 Canvas no tiene ningún método para configurar explícitamente un solo píxel.

Es posible establecer un píxel con una línea muy corta, pero luego la intercalación y los límites de línea pueden interferir.

Otra forma podría ser crear un ImageDataobjeto pequeño y usar:

context.putImageData(data, x, y)

para ponerlo en su lugar.

¿Alguien puede describir una manera eficiente y confiable de hacer esto?

Hay dos mejores contendientes:

1. Cree datos de imagen 1 × 1, establezca el color y putImageDataen la ubicación:

   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. Úselo fillRect()para dibujar un píxel (no debería haber problemas de alias):

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

Puede probar la velocidad de estos aquí: http://jsperf.com/setting-canvas-pixel/9 o aquí https://www.measurethat.net/Benchmarks/Show/1664/1

Recomiendo probar con los navegadores que le interesan para obtener la máxima velocidad. A partir de julio de 2017, fillRect()es 5-6 veces más rápido en Firefox v54 y Chrome v59 (Win7x64).

Otras alternativas más tontas son:

• utilizando getImageData()/putImageData()en todo el lienzo; Esto es aproximadamente 100 veces más lento que otras opciones.

• crear una imagen personalizada usando una url de datos y usarla drawImage()para mostrarla:

  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

• creando otro img o lienzo lleno de todos los píxeles que desee y use drawImage()para borrar solo el píxel que desee. Esto probablemente sería muy rápido, pero tiene la limitación que necesita para calcular previamente los píxeles que necesita.

Tenga en cuenta que mis pruebas no intentan guardar y restaurar el contexto del lienzo fillStyle; Esto ralentizaría el fillRect()rendimiento. También tenga en cuenta que no estoy comenzando con una pizarra limpia o probando exactamente el mismo conjunto de píxeles para cada prueba.

Un método que no se ha mencionado es usar getImageData y luego putImageData.
Este método es bueno para cuando quieres dibujar mucho de una vez, rápido.
http://next.plnkr.co/edit/mfNyalsAR2MWkccr

  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);

No lo había considerado fillRect(), pero las respuestas me impulsaron a compararlo putImage().

Colocar 100,000 píxeles de colores aleatorios en ubicaciones aleatorias, con Chrome 9.0.597.84 en una (antigua) MacBook Pro, requiere menos de 100 ms putImage(), pero casi 900 ms de uso fillRect(). (Código de referencia en http://pastebin.com/4ijVKJcC ).

Si, en cambio, elijo un solo color fuera de los bucles y simplemente trazo ese color en ubicaciones aleatorias, putImage()toma 59 ms frente a 102 ms fillRect().

Parece que la sobrecarga de generar y analizar una especificación de color CSS en rgb(...)sintaxis es responsable de la mayor parte de la diferencia.

Por otro lado, poner valores RGB sin procesar directamente en un ImageDatabloque no requiere manejo ni análisis de cadenas.

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;
}

Dado que los diferentes navegadores parecen preferir métodos diferentes, ¿quizás tenga sentido hacer una prueba más pequeña con los tres métodos como parte del proceso de carga para averiguar cuál es el mejor para usar y luego usarlo en toda la aplicación?

Parece extraño, pero no obstante HTML5 admite líneas de dibujo, círculos, rectángulos y muchas otras formas básicas, no tiene nada adecuado para dibujar el punto básico. La única forma de hacerlo es simulando el punto con lo que tenga.

Básicamente, hay 3 soluciones posibles:

• dibujar punto como una línea
• dibujar punto como un polígono
• dibujar punto como un círculo

Cada uno de ellos tiene sus inconvenientes.

Línea

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

Tenga en cuenta que estamos dibujando en dirección sureste, y si este es el borde, puede haber un problema. Pero también puedes dibujar en cualquier otra dirección.

Rectángulo

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

o de una manera más rápida usando fillRect porque el motor de renderizado solo llenará un píxel.

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

Circulo

Uno de los problemas con los círculos es que es más difícil que un motor los procese

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

la misma idea que con el rectángulo que puedes lograr con el relleno.

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

Problemas con todas estas soluciones:

• Es difícil hacer un seguimiento de todos los puntos que va a dibujar.
• cuando acercas, se ve feo.

Si se pregunta "¿Cuál es la mejor manera de dibujar un punto? ", Iría con un rectángulo lleno. Puedes ver mi jsperf aquí con pruebas de comparación .

¿Qué tal un rectángulo? Eso tiene que ser más eficiente que crear un ImageDataobjeto.

¡Dibuja un rectángulo como dijo sdleihssirhc!

ctx.fillRect (10, 10, 1, 1);

^ - debería dibujar un rectángulo 1x1 en x: 10, y: 10

Hmm, también podrías hacer una línea de 1 píxel de ancho con una longitud de 1 píxel y hacer que su dirección se mueva a lo largo de un solo eje.

            ctx.beginPath();
            ctx.lineWidth = 1; // one pixel wide
            ctx.strokeStyle = rgba(...);
            ctx.moveTo(50,25); // positioned at 50,25
            ctx.lineTo(51,25); // one pixel long
            ctx.stroke();

Para completar la respuesta muy completa de Phrogz, hay una diferencia crítica entre fillRect()y putImageData().
El primer contexto usos para dibujar sobre por la adición de un rectángulo (no un pixel), utilizando el fillStyle valor alfa y el contexto globalAlpha y la matriz de transformación , tapas de línea etc ..
La segunda sustituye a un entero conjunto de píxeles (tal vez uno, pero ¿por qué ?)
El resultado es diferente como se puede ver en jsperf .

Nadie quiere establecer un píxel a la vez (es decir, dibujarlo en la pantalla). Es por eso que no hay una API específica para hacerlo (y con razón).
En cuanto al rendimiento, si el objetivo es generar una imagen (por ejemplo, un software de trazado de rayos), siempre desea utilizar una matriz obtenida por medio de getImageData()un Uint8Array optimizado. Luego llamas putImageData()UNA VEZ o unas pocas veces por segundo usando setTimeout/seTInterval.

Código de demostración HTML rápido: según lo que sé sobre la biblioteca de gráficos SFML C ++:

Guarde esto como un archivo HTML con codificación UTF-8 y ejecútelo. Siéntase libre de refactorizar, simplemente me gusta usar variables japonesas porque son concisas y no ocupan mucho espacio

Rara vez querrá establecer UN píxel arbitrario y mostrarlo en la pantalla. Entonces usa el

PutPix(x,y, r,g,b,a) 

Método para dibujar numerosos píxeles arbitrarios en un búfer de respaldo. (llamadas baratas)

Luego, cuando esté listo para mostrar, llame al

Apply() 

Método para mostrar los cambios. (llamada costosa)

Código de archivo .HTML completo a continuación:

<!DOCTYPE HTML >
<html lang="en">
<head>
    <title> back-buffer demo </title>
</head>
<body>

</body>

<script>
//Main function to execute once 
//all script is loaded:
function main(){

    //Create a canvas:
    var canvas;
    canvas = attachCanvasToDom();

    //Do the pixel setting test:
    var test_type = FAST_TEST;
    backBufferTest(canvas, test_type);
}

//Constants:
var SLOW_TEST = 1;
var FAST_TEST = 2;


function attachCanvasToDom(){
    //Canvas Creation:
    //cccccccccccccccccccccccccccccccccccccccccc//
    //Create Canvas and append to body:
    var can = document.createElement('canvas');
    document.body.appendChild(can);

    //Make canvas non-zero in size, 
    //so we can see it:
    can.width = 800;
    can.height= 600;

    //Get the context, fill canvas to get visual:
    var ctx = can.getContext("2d");
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(0,0,can.width-1, can.height-1);
    //cccccccccccccccccccccccccccccccccccccccccc//

    //Return the canvas that was created:
    return can;
}

//THIS OBJECT IS SLOOOOOWW!
// 筆 == "pen"
//T筆 == "Type:Pen"
function T筆(canvas){


    //Publicly Exposed Functions
    //PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//
    this.PutPix = _putPix;
    //PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//

    if(!canvas){
        throw("[NilCanvasGivenToPenConstruct]");
    }

    var _ctx = canvas.getContext("2d");

    //Pixel Setting Test:
    // only do this once per page
    //絵  =="image"
    //資  =="data"
    //絵資=="image data"
    //筆  =="pen"
    var _絵資 = _ctx.createImageData(1,1); 
    // only do this once per page
    var _筆  = _絵資.data;   


    function _putPix(x,y,  r,g,b,a){
        _筆[0]   = r;
        _筆[1]   = g;
        _筆[2]   = b;
        _筆[3]   = a;
        _ctx.putImageData( _絵資, x, y );  
    }
}

//Back-buffer object, for fast pixel setting:
//尻 =="butt,rear" using to mean "back-buffer"
//T尻=="type: back-buffer"
function T尻(canvas){

    //Publicly Exposed Functions
    //PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//
    this.PutPix = _putPix;
    this.Apply  = _apply;
    //PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//

    if(!canvas){
        throw("[NilCanvasGivenToPenConstruct]");
    }

    var _can = canvas;
    var _ctx = canvas.getContext("2d");

    //Pixel Setting Test:
    // only do this once per page
    //絵  =="image"
    //資  =="data"
    //絵資=="image data"
    //筆  =="pen"
    var _w = _can.width;
    var _h = _can.height;
    var _絵資 = _ctx.createImageData(_w,_h); 
    // only do this once per page
    var _筆  = _絵資.data;   


    function _putPix(x,y,  r,g,b,a){

        //Convert XY to index:
        var dex = ( (y*4) *_w) + (x*4);

        _筆[dex+0]   = r;
        _筆[dex+1]   = g;
        _筆[dex+2]   = b;
        _筆[dex+3]   = a;

    }

    function _apply(){
        _ctx.putImageData( _絵資, 0,0 );  
    }

}

function backBufferTest(canvas_input, test_type){
    var can = canvas_input; //shorthand var.

    if(test_type==SLOW_TEST){
        var t筆 = new T筆( can );

        //Iterate over entire canvas, 
        //and set pixels:
        var x0 = 0;
        var x1 = can.width - 1;

        var y0 = 0;
        var y1 = can.height -1;

        for(var x = x0; x <= x1; x++){
        for(var y = y0; y <= y1; y++){
            t筆.PutPix(
                x,y, 
                x%256, y%256,(x+y)%256, 255
            );
        }}//next X/Y

    }else
    if(test_type==FAST_TEST){
        var t尻 = new T尻( can );

        //Iterate over entire canvas, 
        //and set pixels:
        var x0 = 0;
        var x1 = can.width - 1;

        var y0 = 0;
        var y1 = can.height -1;

        for(var x = x0; x <= x1; x++){
        for(var y = y0; y <= y1; y++){
            t尻.PutPix(
                x,y, 
                x%256, y%256,(x+y)%256, 255
            );
        }}//next X/Y

        //When done setting arbitrary pixels,
        //use the apply method to show them 
        //on screen:
        t尻.Apply();

    }
}


main();
</script>
</html>

Si le preocupa la velocidad, también podría considerar WebGL.

HANDY y propuesta de la función put pixel (pp) (ES6) (lea el píxel aquí ):

let pp= ((s='.myCanvas',c=document.querySelector(s),ctx=c.getContext('2d'),id=ctx.createImageData(1,1)) => (x,y,r=0,g=0,b=0,a=255)=>(id.data.set([r,g,b,a]),ctx.putImageData(id, x, y),c))()

pp(10,30,0,0,255,255);    // x,y,r,g,b,a ; return canvas object

let pp= ((s='.myCanvas',c=document.querySelector(s),ctx=c.getContext('2d'),id=ctx.createImageData(1,1)) => (x,y,r=0,g=0,b=0,a=255)=>(id.data.set([r,g,b,a]),ctx.putImageData(id, x, y),c))()

// draw shape
for(let i=0; i<800; i++) {
   let a = Math.PI*4*i/800;
   let x=16*Math.sin(a)**3;
   let y=13*Math.cos(a)-5*Math.cos(2*a)-2*Math.cos(3*a)-Math.cos(4*a);   
   pp(100+2.5*x,45-2.5*y,255,0,0,255)   
}

<canvas class="myCanvas" width=200 height=100 style="background: black"></canvas>

Esta función utiliza putImageDatay tiene una parte de inicialización (primera línea larga). Al principio, en s='.myCanvas'su lugar, use su selector CSS en su lienzo.

I ¿Quieres para normalizar los parámetros de valor entre 0-1 que debe cambiar el valor por defecto a=255de a=1y de acuerdo con: id.data.set([r,g,b,a]),ctx.putImageData(id, x, y)a id.data.set([r*255,g*255,b*255,a*255]),ctx.putImageData(id, x*c.width, y*c.height)

El práctico código anterior es bueno para los algoritmos gráficos de prueba ad-hoc o para hacer una prueba de concepto, pero no es bueno usarlo en producción donde el código debe ser legible y claro.

putImageData es probablemente más rápido que fillRect forma nativa. Creo que esto se debe a que el quinto parámetro puede tener diferentes formas de ser asignado (el color del rectángulo), utilizando una cadena que debe ser interpretada.

Supongamos que estás haciendo eso:

context.fillRect(x, y, 1, 1, "#fff")
context.fillRect(x, y, 1, 1, "rgba(255, 255, 255, 0.5)")`
context.fillRect(x, y, 1, 1, "rgb(255,255,255)")`
context.fillRect(x, y, 1, 1, "blue")`

Entonces, la línea

context.fillRect(x, y, 1, 1, "rgba(255, 255, 255, 0.5)")`

Es el más pesado entre todos. El quinto argumento en la fillRectllamada es una cadena un poco más larga.