{"ScriptPreparationCode":"var canvas = document.querySelector(\u0027canvas\u0027);\r\nvar ctx = canvas.getContext(\u00272d\u0027)\r\nvar rects = new Array(100).fill({ x: 100, y: 100, width: 100, height: 100, fill: \u0027blue\u0027 })\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 = rect.fill\r\n rect.cached.fillRect(0, 0, rect.width, rect.height)\r\n ctx.drawImage(rect.cached.canvas, rect.x, rect.y, rect.width, rect.height)\r\n}\r\n\r\nfor (var rect of rects) {\r\n ctx.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(0, 0, rect.width, rect.height)\r\n ctx.fillStyle = rect.fill\r\n ctx.fill(rect.path)\r\n}\r\n\r\nfor (var rect of rects) {\r\n ctx.fillStyle = rect.fill\r\n ctx.fill(rect.path)\r\n}","IsDeferred":false}]}