HTML5 Tuval açıkça tek bir piksel ayarı için bir yöntem vardır.

Bir piksel çok kısa bir çizgi kullanarak ayarlamak mümkün olabilir, ama antialising ve çizgi caps etkileyebilir.

Başka bir yolu ImageData küçük bir nesne yaratmak için kullanıyor olabilir:

context.putImageData(data, x, y)

yere koymak için.

Herkes bu işin verimli ve güvenilir bir şekilde anlatabilir mi?

En iyi iki yarışmacının vardır:

1. 1x1 görüntü veri oluşturmak, rengini ayarlamak ve konumda 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. Kullanım fillRect() bir piksel çizmek için (aliasing sorunları olmalı hayır):

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

Bu burada hızını test edebilirsiniz: http://jsperf.com/setting-canvas-pixel
Chrome 1x1 görüntü verileri hakkında 10x(!) fillRect kullanarak hızlı olarak.
Firefox 3.6 üzerinde 1x1 sadece 1.3 x daha hızlı.
B 1x1 hakkında 80x 4.0 Firefox(!!)yavaşdaha fillRect.
Bu yavaşlama sadece donanım hızlandırma etkin olduğunda oluşur ve may be fixed.

Maksimum hız için 1x1 görüntü verileri kullanmanızı tavsiye ederiz.

Diğer, akılları alternatifler:

• tüm tuval üzerinde getImageData()/putImageData() kullanarak; testlerde gösterildiği gibi, bu diğer seçeneklere göre yaklaşık 100 kez daha yavaş.

• özel bir resim veri bir url kullanarak ve drawImage() Haritayı kullanarak oluşturma:

  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
  

• ımg veya başka bir tuval oluşturmak istediğiniz tüm piksel ile drawImage() üzerinde istediğiniz piksel blit için kullanmak doldurdu. Bu muhtemelen çok hızlı oldu, ama önceden hesaplamak gerekir piksel için gereken sınırlama vardır.

Benim testleri ve tuval bağlam fillStyle kaydetmek için teşebbüs etmeyin; bu da fillRect performansını yavaşlatır unutmayın. Ayrıca unutmayın (test çerçevesinde sınırlamalar nedeniyle) geçmişe Sünger veya her test için piksel aynı test değilim.