{"ScriptPreparationCode":"var ctx = document.getElementById(\u0027canvas\u0027).getContext(\u00272d\u0027);\r\nctx.fillStyle = \u0027rgba(0,1,0,1)\u0027;\r\nvar rects = []\r\nfor (var i = 0; i \u003C 50; i\u002B\u002B) {\r\n var width = 5 \u002B i * 5;\r\n var height = 7 \u002B i * 3;\r\n var path = new Path2D();\r\n path.rect(0, 0, width, height);\r\n var rect = \r\n {\r\n x: i, \r\n y: i, \r\n width: width, \r\n height: height, \r\n cachedPath: path\r\n };\r\n rects.push(rect);\r\n}\r\nctx.clearRect(0, 0, 500, 500);","TestCases":[{"Name":"Direct draw","Code":"for (var i = 0; i \u003C rects.length; i\u002B\u002B) {\r\n var rect = rects[i];\r\n ctx.rect(rect.x, rect.y, rect.width, rect.height);\r\n ctx.fill();\r\n}","IsDeferred":false},{"Name":"New path","Code":"for (var i = 0; i \u003C rects.length; i\u002B\u002B) {\r\n var rect = rects[i];\r\n var path = new Path2D();\r\n path.rect(rect.x, rect.y, rect.width, rect.height)\r\n ctx.fill(path)\r\n}","IsDeferred":false},{"Name":"Cached path","Code":"for (var i = 0; i \u003C rects.length; i\u002B\u002B) {\r\n var rect = rects[i];\r\n ctx.translate(rect.x, rect.y);\r\n ctx.fill(rect.path);\r\n ctx.translate(-rect.x, -rect.y);\r\n}","IsDeferred":false},{"Name":"Direct with beginpath","Code":"for (var i = 0; i \u003C rects.length; i\u002B\u002B) {\r\n var rect = rects[i];\r\n ctx.beginPath();\r\n ctx.rect(rect.x, rect.y, rect.width, rect.height);\r\n ctx.fill();\r\n }","IsDeferred":false},{"Name":"Direct fillrect","Code":"for (var i = 0; i \u003C rects.length; i\u002B\u002B) {\r\n var rect = rects[i];\r\n ctx.fillRect(rect.x, rect.y, rect.width, rect.height);\r\n}","IsDeferred":false}]}