{"ScriptPreparationCode":"// Create the canvas that the pixels will be drawn to:\r\n$canvas = document.getElementById(\u0027canvas\u0027);\r\n$context = $canvas.getContext(\u00272d\u0027);\r\n$context.clearRect(0, 0, 800, 300);\r\n\r\n// Use that canvas to generate a 1px by 1px ImageData instance:\r\n$onePixel = $context.createImageData(1, 1);\r\n$onePixelData = $onePixel.data;\r\n\r\n// Create 10,000 test pixels:\r\n$pixels = [];\r\nfor (let i=0; i\u003C10000; \u002B\u002Bi) {\r\n const pixel = {\r\n x: Math.random() * 800 \u003C\u003C 0,\r\n y: Math.random() * 300 \u003C\u003C 0,\r\n r: Math.random() * 255 \u003C\u003C 0,\r\n g: Math.random() * 255 \u003C\u003C 0,\r\n b: Math.random() * 255 \u003C\u003C 0,\r\n a: (Math.random() * 128 \u003C\u003C 0) \u002B 128,\r\n };\r\n pixel.aNormalized = pixel.a / 255;\r\n pixel.rgbaArray = [pixel.r, pixel.g, pixel.b, pixel.aNormalized];\r\n $pixels.push(pixel);\r\n}\r\n\r\n// For the drawImage() test, create a canvas that has all 10,000 pixels rendered to it:\r\n$paletteCanvas = document.createElement(\u0027canvas\u0027);\r\n$paletteCanvas.width = 10000;\r\n$paletteCanvas.height = 1;\r\nconst paletteContext = $paletteCanvas.getContext(\u00272d\u0027);\r\nconst imageData = paletteContext.getImageData(0, 0, 10000, 1);\r\n$pixels.forEach((pixel, index) =\u003E imageData.data.set(pixel.rgbaArray, index));\r\npaletteContext.putImageData(imageData, 0, 0);\r\n\r\n$iterations = 500;","TestCases":[{"Name":"fillRect using a concatenated color string","Code":"for (let i=0; i\u003C$iterations; \u002B\u002Bi) {\r\n const px = $pixels[i % 10000];\r\n $context.fillStyle = \u0027rgba(\u0027 \u002B px.r \u002B \u0027,\u0027 \u002B px.g \u002B \u0027,\u0027 \u002B px.b \u002B \u0027,\u0027 \u002B px.aNormalized \u002B \u0027)\u0027;\r\n $context.fillRect(px.x, px.y, 1, 1);\r\n}","IsDeferred":false},{"Name":"fillRect using a joined color string","Code":"for (let i=0; i\u003C$iterations; \u002B\u002Bi) {\r\n const px = $pixels[i % 10000];\r\n $context.fillStyle = \u0027rgba(\u0027 \u002B px.rgbaArray.join() \u002B \u0027)\u0027;\r\n $context.fillRect(px.x, px.y, 1, 1);\r\n}","IsDeferred":false},{"Name":"fillRect with a template literal color string","Code":"for (let i=0; i\u003C$iterations; \u002B\u002Bi) {\r\n const px = $pixels[i % 10000];\r\n $context.fillStyle = \u0060rgba(${px.r},${px.g},${px.b},${px.aNormalized})\u0060;\r\n $context.fillRect(px.x, px.y, 1, 1);\r\n}","IsDeferred":false},{"Name":"fillRect with a constant color string","Code":"for (let i=0; i\u003C$iterations; \u002B\u002Bi) {\r\n const px = $pixels[i % 10000];\r\n $context.fillStyle = \u0027rgba(100,150,200,0.9)\u0027;\r\n $context.fillRect(px.x, px.y, 1, 1);\r\n}","IsDeferred":false},{"Name":"putImageData() using a 1px by 1px ImageData instance","Code":"for (let i=0; i\u003C$iterations; \u002B\u002Bi) {\r\n const px = $pixels[i % 10000];\r\n $onePixelData[0] = px.r;\r\n $onePixelData[1] = px.g;\r\n $onePixelData[2] = px.b;\r\n $onePixelData[3] = px.a;\r\n $context.putImageData($onePixel, px.x, px.y);\r\n}","IsDeferred":false},{"Name":"Using drawImage to copy a pixel from a palette canvas","Code":"for (let i=0; i\u003C$iterations; \u002B\u002Bi) {\r\n const index = i % 10000;\r\n const px = $pixels[index];\r\n $context.drawImage($paletteCanvas, index, 0, 1, 1, px.x, px.y, 1, 1);\r\n}","IsDeferred":false}]}