Databases
StackOverflow2013
Postsdbo
POSpeed up HTML5 Canvas pixel rendering
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSpeed up HTML5 Canvas pixel rendering
    primarykey
    data
    text
    <p>I am designing a Photoshop-style web application running on the HTML5 Canvas element. The program runs well and is very speedy until I add blend modes into the equation. I achieve blend modes by merging each canvas element into one and combining each pixel from each canvas using the right blend modes starting from the bottom canvas.</p> <pre><code>for (int i=0; i&lt;width*height*4; i+=4) { var base = [layer[0][i],layer[0][i+1],layer[0][i+2],layer[0][i+3]]; var nextLayerPixel = [layer[1][i],layer[1][i+1],layer[1][i+2],layer[1][i+3]]; //Apply first blend between first and second layer basePixel = blend(base,nextLayerPixel); for(int j=0;j+1 != layer.length;j++){ //Apply subsequent blends here to basePixel nextLayerPixel = [layer[j+1][i],layer[j+1][i+1],layer[j+1][i+2],layer[j+1][i+3]]; basePixel = blend(basePixel,nextLayerPixel); } pixels[i] = base[0]; pixels[i+1] = base[1]; pixels[i+2] = base[2]; pixels[i+3] = base[3]; } canvas.getContext('2d').putImageData(imgData,x,y); </code></pre> <p>With it calling blend for different blend modes. My 'normal' blend mode is as follows:</p> <pre><code>var blend = function(base,blend) { var fgAlpha = blend[3]/255; var bgAlpha = (1-blend[3]/255)*base[3]/255; blend[0] = (blend[0]*fgAlpha+base[0]*bgAlpha); blend[1] = (blend[1]*fgAlpha+base[1]*bgAlpha); blend[2] = (blend[2]*fgAlpha+base[2]*bgAlpha); blend[3] = ((blend[3]/255+base[3])-(blend[3]/255*base[3]))*255; return blend; } </code></pre> <p>My test results in Chrome (yielding some of the best out of the tested browsers) was around 400ms blending three layers together on a canvas 620x385 (238,700 pixels).</p> <p>This is a very small implementation as most projects will be larger in size and include more layers which will make the execution time skyrocket under this method.</p> <p>I'm wondering if there is any faster way to combine two canvas contexts with a blend mode without having to go through every pixel.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USEvan Kennedy
    1. USEvan Kennedy
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POSpeed up HTML5 Canvas pixel rendering
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POSpeed up HTML5 Canvas pixel rendering
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POSpeed up HTML5 Canvas pixel rendering
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhat is `nextLayerPixel`? How do you create it and why do you change it in the `blend` function (second parameter)?
      singulars
      1. POSpeed up HTML5 Canvas pixel rendering
      1. USBergi
    2. COI first excluded that part to show the functionality without the extra code making it messy, but now I added it in. 'nextLayerPixel' simply is a variable that refers to the same pixel in each layer. So with a project with 3 layers and on pixel x:30, y:20, it will grab the bottom layer pixel at 30,20 then middle 30,20 and then top 30,20.
      singulars
      1. POSpeed up HTML5 Canvas pixel rendering
      1. USEvan Kennedy
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload