{"ScriptPreparationCode":"$c = document.getElementById(\u0027c\u0027);\r\n$ctx = $c.getContext(\u00272d\u0027);\r\n$ctx.clearRect(0, 0, 800, 300);\r\n$px = $ctx.createImageData(1, 1);\r\n$id = $ctx.getImageData(0, 0, 800, 600);\r\n$pxls = [];\r\nfor (var i = 0; i \u003C 1000000; \u002B\u002Bi) {\r\n const pxl = {\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 pxl.rgba = [pxl.r, pxl.g, pxl.b, pxl.a];\r\n $pxls.push(pxl);\r\n};\r\n$i = 0;\r\n$iterations = 5000;\r\n/*\r\nAt 1500\u002B $iterations the putimagedata/getimagedata starts to win and at 5000 it slaughters. Below that the other methods win\r\nSo it depends on how many you plan on drawing each frame\r\n*/","TestCases":[{"Name":"fillRect/concat","Code":"for (var i=$iterations;i--;){\r\nvar px = $pxls[$i\u002B\u002B % 10000];\r\n$ctx.fillStyle = \u0027rgba(\u0027 \u002B px.r \u002B \u0027,\u0027 \u002B px.g \u002B \u0027,\u0027 \u002B px.b \u002B \u0027,\u0027 \u002B (px.a / 255) \u002B \u0027)\u0027;\r\n$ctx.fillRect(px.x, px.y, 1, 1);\r\n}","IsDeferred":false},{"Name":"fillRect/join","Code":"for (var i=$iterations;i--;){\r\nvar px = $pxls[$i\u002B\u002B % 10000];\r\n$ctx.fillStyle = \u0027rgba(\u0027 \u002B [px.r,px.g,px.b,px.a/255].join() \u002B \u0027)\u0027;\r\n$ctx.fillRect(px.x, px.y, 1, 1);\r\n}","IsDeferred":false},{"Name":"1\u00D71 Image Data","Code":"for (var i=$iterations;i--;){\r\nvar px=$pxls[$i\u002B\u002B % 10000], d=$px.data;\r\nd[0] = px.r;\r\nd[1] = px.g;\r\nd[2] = px.b;\r\nd[3] = px.a;\r\n$ctx.putImageData($px, px.x, px.y);\r\n}","IsDeferred":false},{"Name":"fillRect/template literal","Code":"for (var i=$iterations;i--;){\r\nvar px = $pxls[$i\u002B\u002B % 10000];\r\n$ctx.fillStyle = \u0060rgba(${px.r},${px.g},${px.b},${px.a/255}})\u0060;\r\n$ctx.fillRect(px.x, px.y, 1, 1);\r\n}","IsDeferred":false},{"Name":"getImageData/putImageData","Code":"var canvasWidth = $c.width;\r\nvar canvasHeight = $c.height;\r\nvar id = $ctx.getImageData(0, 0, canvasWidth, canvasHeight);\r\nvar pixels = id.data;\r\n\r\nfor (var i=$iterations;i--;){\r\n var px = $pxls[$i\u002B\u002B % 10000];\r\n var off = (px.y * canvasWidth \u002B px.x) * 4;\r\n pixels[off] = px.r;\r\n pixels[off \u002B 1] = px.g;\r\n pixels[off \u002B 2] = px.b;\r\n pixels[off \u002B 3] = px.a;\r\n}\r\n$ctx.putImageData(id, 0, 0);","IsDeferred":false},{"Name":"getImageData/putImageData - set px.rgba","Code":"var canvasWidth = $c.width;\r\nvar canvasHeight = $c.height;\r\nvar id = $ctx.getImageData(0, 0, canvasWidth, canvasHeight);\r\nvar pixels = id.data;\r\n\r\nfor (var i=$iterations;i--;){\r\n var px = $pxls[$i\u002B\u002B % 10000];\r\n var off = (px.y * canvasWidth \u002B px.x) * 4;\r\n pixels.set(px.rgba,off);\r\n}\r\n$ctx.putImageData(id, 0, 0);","IsDeferred":false},{"Name":"getImageData/putImageData - set [px.r, px.g, px.b, px.a]","Code":"var canvasWidth = $c.width;\r\nvar canvasHeight = $c.height;\r\nvar id = $ctx.getImageData(0, 0, canvasWidth, canvasHeight);\r\nvar pixels = id.data;\r\n\r\nfor (var i=$iterations;i--;){\r\n var px = $pxls[$i\u002B\u002B % 10000];\r\n var off = (px.y * canvasWidth \u002B px.x) * 4;\r\n pixels.set([px.r,px.g,px.b,px.a],off);\r\n}\r\n$ctx.putImageData(id, 0, 0);","IsDeferred":false},{"Name":"getImageData/putImageData - set - no getImageData","Code":"var canvasWidth = $c.width;\r\nvar canvasHeight = $c.height;\r\n//var id = $ctx.getImageData(0, 0, canvasWidth, canvasHeight);\r\nvar pixels = $id.data;\r\npixels.fill();\r\n\r\nfor (var i=$iterations;i--;){\r\n var px = $pxls[$i\u002B\u002B % 10000];\r\n var off = (px.y * canvasWidth \u002B px.x) * 4;\r\n pixels.set(px.rgba,off);\r\n}\r\n$ctx.putImageData($id, 0, 0);","IsDeferred":false}]}