{"ScriptPreparationCode":"var [canvas1, canvas2] = Array.from(document.querySelectorAll(\u0027canvas\u0027));\r\nvar ctx1 = canvas1.getContext(\u00272d\u0027)\r\nvar ctx2 = canvas2.getContext(\u00272d\u0027)\r\nvar rects = new Array(100).fill(null).map(() =\u003E ({\r\n x: Math.floor(Math.random() * 100),\r\n y: Math.floor(Math.random() * 100),\r\n width: Math.floor(Math.random() * 100) \u002B 1,\r\n height: Math.floor(Math.random() * 100) \u002B 1\r\n}))","TestCases":[{"Name":"Cached canvas","Code":"for (var rect of rects) {\r\n var cached = document.createElement(\u0027canvas\u0027)\r\n cached.width = rect.width\r\n cached.height = rect.height\r\n rect.cached = cached.getContext(\u00272d\u0027)\r\n rect.cached.fillStyle = \u0027blue\u0027\r\n rect.cached.fillRect(0, 0, rect.width, rect.height)\r\n ctx1.drawImage(rect.cached.canvas, rect.x, rect.y, rect.width, rect.height)\r\n}\r\n\r\nctx1.clearRect(0, 0, 500, 500)\r\n\r\nfor (var rect of rects) {\r\n ctx1.drawImage(rect.cached.canvas, rect.x, rect.y, rect.width, rect.height)\r\n}","IsDeferred":false},{"Name":"Cached Path2D","Code":"for (var rect of rects) {\r\n rect.path = new Path2D()\r\n rect.path.rect(rect.x, rect.y, rect.width, rect.height)\r\n ctx2.fillStyle = rect.fill\r\n ctx2.fill(rect.path)\r\n}\r\n\r\nctx2.clearRect(0, 0, 500, 500)\r\n\r\nfor (var rect of rects) {\r\n ctx2.fillStyle = \u0027red\u0027\r\n ctx2.fill(rect.path)\r\n}","IsDeferred":false}]}