Benchmark: Html Canvas Draw

HTML Preparation code:

<canvas id="cnv1" width=1216 height=769></canvas>

Script Preparation code:

var ctx = document.getElementById("cnv1").getContext("2d");
var svgImg = document.getElementById("svg1");

Tests:

Path2D SVG String
var z = new Path2D("M143.62 103.75c.12-.28.4-.22.54-.45.13-.2.17-.49.37-.64.26-.2.3-.92.42-1.2.6-1.57 1.92-3 3-4.25.96-1.15 2.07-2.12 2.14-3.67.1-1.95.13-3.9.27-5.85.1-1.5.03-3.48.77-4.8.43-.78.15-1.13-.37-1.73-.15-.17-.33-.3-.48-.47-.26-.3.08-.56-.04-.86-.27-.69-.83-1.23-1.16-1.89-.27-.55-.1-1.23-.15-1.83-.1-1-.4-1.95-.55-2.93-.02-.1-.2-.52-.05-.6l3.47-1.64 25.13 14.22.26 13.92c-.84-.26-.9-.16-1.78-.02-.58.1-1.32 0-1.5.54-.14.4.24 1.14-.05 1.52-.27.36-.68 1.58-1.25 1.78-.65.23-.38 1.35.08 1.8-1.05.84-1.74 1.37-.92 2.54.55.8-.74 1.13-1.09 1.8-.24.46-.34.61.03.98.32.32.86-.02 1.2-.02.42 0 .77.2.5.54-.4.48.41 1.05.1 1.9l.33-.15c.25.4-.03.84-.03 1.25 0 .46.06.47.36.8.27.3.91.13.95.93.02.36-.32 1-.22 1.41-.18-.3-1.06-.6-1.44-.4-.23.12-.55.22-.7.44-.18.28-.22.1-.43.33-.33.37-1.14.28-1.25.86-.05.24.14.44.06.7-.25.81-1 1.15-1.6 1.7-.47.43-.7 1.04-1.14 1.51-.76.84-1.28 1.03-2.35 1.43a8.9 8.9 0 0 1-2.77.26c-.22-.02-1.56.3-1.08.66.2.16.76.26.63.64a4.13 4.13 0 0 1-.97 1.34c-.26.24-.5.84-.82.92-.63.16-1.38.04-2.03.1-.85.07-1.48.28-2.2.73-.4.25-1.16.46-1.34.94-.3-.4-.7-.7-.82-1.2-.27.1-.4.43-.52.66-.1.15-.6.2-.79.27-.87.4-1.17.32-2.1.33.5-.6-.06-.84-.23-1.4-.24-.79-.45-1.67-.96-2.33-.44-.56-1.05-.95-1.6-1.39-.54-.44-.84-.98-1.28-1.5-.3-.35-1.05-1.03-.7-1.55.37-.52.54-.9 1.23-.86.76.04 1.5.34 2.25.1.34-.12.63.04.93.16.27.11.66-.14.91-.22-1.5-.84-2.2-2.86-2.13-4.5.02-.38.2-.69.25-1.04.03-.38-.06-.75-.07-1.12 0-.28.05-.74-.1-1-.14-.19-.5-.04-.48-.37.03-.43-.14-1.02-.23-1.44-.07-.3-.5-.36-.72-.5-.7-.43.2-1.08-1.2-1.3-.33-.04-.23.22-.59-.05a15.6 15.6 0 0 1-1.32-2.04c-.46-.84-.4-1.88-.58-2.8"); ctx.fillStyle="red"; ctx.fill(z); ctx.strokeStyle="black"; ctx.stroke(z);
Path2D Commands
var z = new Path2D(); z.moveTo(143.62, 103.75); z.bezierCurveTo(143.74, 103.47, 144.02, 103.53, 144.16, 103.3); z.bezierCurveTo(144.29, 103.1, 144.32999999999998, 102.81, 144.53, 102.66); z.bezierCurveTo(144.79, 102.46, 144.83, 101.74, 144.95, 101.46); z.bezierCurveTo(145.54999999999998, 99.89, 146.86999999999998, 98.46, 147.95, 97.21); z.bezierCurveTo(148.91, 96.05999999999999, 150.01999999999998, 95.08999999999999, 150.08999999999997, 93.53999999999999); z.bezierCurveTo(150.18999999999997, 91.58999999999999, 150.21999999999997, 89.63999999999999, 150.35999999999999, 87.69); z.bezierCurveTo(150.45999999999998, 86.19, 150.39, 84.21, 151.13, 82.89); z.bezierCurveTo(151.56, 82.11, 151.28, 81.76, 150.76, 81.16); z.bezierCurveTo(150.60999999999999, 80.99, 150.42999999999998, 80.86, 150.28, 80.69); z.bezierCurveTo(150.02, 80.39, 150.36, 80.13, 150.24, 79.83); z.bezierCurveTo(149.97, 79.14, 149.41, 78.6, 149.08, 77.94); z.bezierCurveTo(148.81, 77.39, 148.98000000000002, 76.71, 148.93, 76.11); z.bezierCurveTo(148.83, 75.11, 148.53, 74.16, 148.38, 73.17999999999999); z.bezierCurveTo(148.35999999999999, 73.08, 148.18, 72.66, 148.32999999999998, 72.58); z.lineTo(151.79999999999998, 70.94); z.lineTo(176.92999999999998, 85.16); z.lineTo(177.18999999999997, 99.08); z.bezierCurveTo(176.34999999999997, 98.82, 176.28999999999996, 98.92, 175.40999999999997, 99.06); z.bezierCurveTo(174.82999999999996, 99.16, 174.08999999999997, 99.06, 173.90999999999997, 99.60000000000001); z.bezierCurveTo(173.76999999999998, 100.00000000000001, 174.14999999999998, 100.74000000000001, 173.85999999999996, 101.12); z.bezierCurveTo(173.58999999999995, 101.48, 173.17999999999995, 102.7, 172.60999999999996, 102.9); z.bezierCurveTo(171.95999999999995, 103.13000000000001, 172.22999999999996, 104.25, 172.68999999999997, 104.7); z.bezierCurveTo(171.63999999999996, 105.54, 170.94999999999996, 106.07000000000001, 171.76999999999998, 107.24000000000001); z.bezierCurveTo(172.32, 108.04, 171.02999999999997, 108.37, 170.67999999999998, 109.04); z.bezierCurveTo(170.43999999999997, 109.5, 170.33999999999997, 109.65, 170.70999999999998, 110.02000000000001); z.bezierCurveTo(171.02999999999997, 110.34, 171.57, 110.00000000000001, 171.90999999999997, 110.00000000000001); z.bezierCurveTo(172.32999999999996, 110.00000000000001, 172.67999999999998, 110.20000000000002, 172.40999999999997, 110.54000000000002); z.bezierCurveTo(172.00999999999996, 111.02000000000002, 172.81999999999996, 111.59000000000002, 172.50999999999996, 112.44000000000003); z.lineTo(172.83999999999997, 112.29000000000002); z.bezierCurveTo(173.08999999999997, 112.69000000000003, 172.80999999999997, 113.13000000000002, 172.80999999999997, 113.54000000000002); z.bezierCurveTo(172.80999999999997, 114.00000000000001, 172.86999999999998, 114.01000000000002, 173.17, 114.34000000000002); z.bezierCurveTo(173.44, 114.64000000000001, 174.07999999999998, 114.47000000000001, 174.11999999999998, 115.27000000000002); z.bezierCurveTo(174.14, 115.63000000000002, 173.79999999999998, 116.27000000000002, 173.89999999999998, 116.68000000000002); z.bezierCurveTo(173.71999999999997, 116.38000000000002, 172.83999999999997, 116.08000000000003, 172.45999999999998, 116.28000000000002); z.bezierCurveTo(172.23, 116.40000000000002, 171.90999999999997, 116.50000000000001, 171.76, 116.72000000000001); z.bezierCurveTo(171.57999999999998, 117.00000000000001, 171.54, 116.82000000000001, 171.32999999999998, 117.05000000000001); z.bezierCurveTo(170.99999999999997, 117.42000000000002, 170.19, 117.33000000000001, 170.07999999999998, 117.91000000000001); z.bezierCurveTo(170.02999999999997, 118.15, 170.21999999999997, 118.35000000000001, 170.14, 118.61000000000001); z.bezierCurveTo(169.89, 119.42000000000002, 169.14, 119.76000000000002, 168.54, 120.31000000000002); z.bezierCurveTo(168.07, 120.74000000000002, 167.84, 121.35000000000002, 167.4, 121.82000000000002); z.bezierCurveTo(166.64000000000001, 122.66000000000003, 166.12, 122.85000000000002, 165.05, 123.25000000000003); z.bezierCurveTo(164.14600587138946, 123.48134199054587, 163.2112539949289, 123.56908043738028, 162.28, 123.51000000000003); z.bezierCurveTo(162.06, 123.49000000000004, 160.72, 123.81000000000003, 161.2, 124.17000000000003); z.bezierCurveTo(161.39999999999998, 124.33000000000003, 161.95999999999998, 124.43000000000004, 161.82999999999998, 124.81000000000003); z.bezierCurveTo(161.60034517620645, 125.31751264704667, 161.2703942628317, 125.77332112610513, 160.85999999999999, 126.15000000000003); z.bezierCurveTo(160.6, 126.39000000000003, 160.35999999999999, 126.99000000000004, 160.04, 127.07000000000004); z.bezierCurveTo(159.41, 127.23000000000003, 158.66, 127.11000000000004, 158.01, 127.17000000000003); z.bezierCurveTo(157.16, 127.24000000000002, 156.53, 127.45000000000003, 155.81, 127.90000000000003); z.bezierCurveTo(155.41, 128.15000000000003, 154.65, 128.36000000000004, 154.47, 128.84000000000003); z.bezierCurveTo(154.17, 128.44000000000003, 153.77, 128.14000000000004, 153.65, 127.64000000000003); z.bezierCurveTo(153.38, 127.74000000000002, 153.25, 128.07000000000002, 153.13, 128.30000000000004); z.bezierCurveTo(153.03, 128.45000000000005, 152.53, 128.50000000000003, 152.34, 128.57000000000005); z.bezierCurveTo(151.47, 128.97000000000006, 151.17000000000002, 128.89000000000004, 150.24, 128.90000000000006); z.bezierCurveTo(150.74, 128.30000000000007, 150.18, 128.06000000000006, 150.01000000000002, 127.50000000000006); z.bezierCurveTo(149.77, 126.71000000000005, 149.56000000000003, 125.83000000000006, 149.05, 125.17000000000006); z.bezierCurveTo(148.61, 124.61000000000006, 148, 124.22000000000006, 147.45000000000002, 123.78000000000006); z.bezierCurveTo(146.91000000000003, 123.34000000000006, 146.61, 122.80000000000005, 146.17000000000002, 122.28000000000006); z.bezierCurveTo(145.87, 121.93000000000006, 145.12, 121.25000000000006, 145.47000000000003, 120.73000000000006); z.bezierCurveTo(145.84000000000003, 120.21000000000006, 146.01000000000002, 119.83000000000006, 146.70000000000002, 119.87000000000006); z.bezierCurveTo(147.46, 119.91000000000007, 148.20000000000002, 120.21000000000006, 148.95000000000002, 119.97000000000006); z.bezierCurveTo(149.29000000000002, 119.85000000000005, 149.58, 120.01000000000006, 149.88000000000002, 120.13000000000005); z.bezierCurveTo(150.15000000000003, 120.24000000000005, 150.54000000000002, 119.99000000000005, 150.79000000000002, 119.91000000000005); z.bezierCurveTo(149.29000000000002, 119.07000000000005, 148.59000000000003, 117.05000000000005, 148.66000000000003, 115.41000000000005); z.bezierCurveTo(148.68000000000004, 115.03000000000006, 148.86, 114.72000000000006, 148.91000000000003, 114.37000000000005); z.bezierCurveTo(148.94000000000003, 113.99000000000005, 148.85000000000002, 113.62000000000005, 148.84000000000003, 113.25000000000004); z.bezierCurveTo(148.84000000000003, 112.97000000000004, 148.89000000000004, 112.51000000000005, 148.74000000000004, 112.25000000000004); z.bezierCurveTo(148.60000000000005, 112.06000000000004, 148.24000000000004, 112.21000000000004, 148.26000000000005, 111.88000000000004); z.bezierCurveTo(148.29000000000005, 111.45000000000003, 148.12000000000006, 110.86000000000004, 148.03000000000006, 110.44000000000004); z.bezierCurveTo(147.96000000000006, 110.14000000000004, 147.53000000000006, 110.08000000000004, 147.31000000000006, 109.94000000000004); z.bezierCurveTo(146.61000000000007, 109.51000000000003, 147.51000000000005, 108.86000000000004, 146.11000000000007, 108.64000000000004); z.bezierCurveTo(145.78000000000006, 108.60000000000004, 145.88000000000008, 108.86000000000004, 145.52000000000007, 108.59000000000005); z.bezierCurveTo(145.02763114922203, 107.94535294208787, 144.5862927627436, 107.26328452663952, 144.20000000000007, 106.55000000000004); z.bezierCurveTo(143.74000000000007, 105.71000000000004, 143.80000000000007, 104.67000000000004, 143.62000000000006, 103.75000000000004); z.closePath(); ctx.fillStyle="red"; ctx.fill(z); ctx.strokeStyle="black"; ctx.stroke(z);
Drawing Context Commands
ctx.beginPath(); ctx.moveTo(143.62, 103.75); ctx.bezierCurveTo(143.74, 103.47, 144.02, 103.53, 144.16, 103.3); ctx.bezierCurveTo(144.29, 103.1, 144.32999999999998, 102.81, 144.53, 102.66); ctx.bezierCurveTo(144.79, 102.46, 144.83, 101.74, 144.95, 101.46); ctx.bezierCurveTo(145.54999999999998, 99.89, 146.86999999999998, 98.46, 147.95, 97.21); ctx.bezierCurveTo(148.91, 96.05999999999999, 150.01999999999998, 95.08999999999999, 150.08999999999997, 93.53999999999999); ctx.bezierCurveTo(150.18999999999997, 91.58999999999999, 150.21999999999997, 89.63999999999999, 150.35999999999999, 87.69); ctx.bezierCurveTo(150.45999999999998, 86.19, 150.39, 84.21, 151.13, 82.89); ctx.bezierCurveTo(151.56, 82.11, 151.28, 81.76, 150.76, 81.16); ctx.bezierCurveTo(150.60999999999999, 80.99, 150.42999999999998, 80.86, 150.28, 80.69); ctx.bezierCurveTo(150.02, 80.39, 150.36, 80.13, 150.24, 79.83); ctx.bezierCurveTo(149.97, 79.14, 149.41, 78.6, 149.08, 77.94); ctx.bezierCurveTo(148.81, 77.39, 148.98000000000002, 76.71, 148.93, 76.11); ctx.bezierCurveTo(148.83, 75.11, 148.53, 74.16, 148.38, 73.17999999999999); ctx.bezierCurveTo(148.35999999999999, 73.08, 148.18, 72.66, 148.32999999999998, 72.58); ctx.lineTo(151.79999999999998, 70.94); ctx.lineTo(176.92999999999998, 85.16); ctx.lineTo(177.18999999999997, 99.08); ctx.bezierCurveTo(176.34999999999997, 98.82, 176.28999999999996, 98.92, 175.40999999999997, 99.06); ctx.bezierCurveTo(174.82999999999996, 99.16, 174.08999999999997, 99.06, 173.90999999999997, 99.60000000000001); ctx.bezierCurveTo(173.76999999999998, 100.00000000000001, 174.14999999999998, 100.74000000000001, 173.85999999999996, 101.12); ctx.bezierCurveTo(173.58999999999995, 101.48, 173.17999999999995, 102.7, 172.60999999999996, 102.9); ctx.bezierCurveTo(171.95999999999995, 103.13000000000001, 172.22999999999996, 104.25, 172.68999999999997, 104.7); ctx.bezierCurveTo(171.63999999999996, 105.54, 170.94999999999996, 106.07000000000001, 171.76999999999998, 107.24000000000001); ctx.bezierCurveTo(172.32, 108.04, 171.02999999999997, 108.37, 170.67999999999998, 109.04); ctx.bezierCurveTo(170.43999999999997, 109.5, 170.33999999999997, 109.65, 170.70999999999998, 110.02000000000001); ctx.bezierCurveTo(171.02999999999997, 110.34, 171.57, 110.00000000000001, 171.90999999999997, 110.00000000000001); ctx.bezierCurveTo(172.32999999999996, 110.00000000000001, 172.67999999999998, 110.20000000000002, 172.40999999999997, 110.54000000000002); ctx.bezierCurveTo(172.00999999999996, 111.02000000000002, 172.81999999999996, 111.59000000000002, 172.50999999999996, 112.44000000000003); ctx.lineTo(172.83999999999997, 112.29000000000002); ctx.bezierCurveTo(173.08999999999997, 112.69000000000003, 172.80999999999997, 113.13000000000002, 172.80999999999997, 113.54000000000002); ctx.bezierCurveTo(172.80999999999997, 114.00000000000001, 172.86999999999998, 114.01000000000002, 173.17, 114.34000000000002); ctx.bezierCurveTo(173.44, 114.64000000000001, 174.07999999999998, 114.47000000000001, 174.11999999999998, 115.27000000000002); ctx.bezierCurveTo(174.14, 115.63000000000002, 173.79999999999998, 116.27000000000002, 173.89999999999998, 116.68000000000002); ctx.bezierCurveTo(173.71999999999997, 116.38000000000002, 172.83999999999997, 116.08000000000003, 172.45999999999998, 116.28000000000002); ctx.bezierCurveTo(172.23, 116.40000000000002, 171.90999999999997, 116.50000000000001, 171.76, 116.72000000000001); ctx.bezierCurveTo(171.57999999999998, 117.00000000000001, 171.54, 116.82000000000001, 171.32999999999998, 117.05000000000001); ctx.bezierCurveTo(170.99999999999997, 117.42000000000002, 170.19, 117.33000000000001, 170.07999999999998, 117.91000000000001); ctx.bezierCurveTo(170.02999999999997, 118.15, 170.21999999999997, 118.35000000000001, 170.14, 118.61000000000001); ctx.bezierCurveTo(169.89, 119.42000000000002, 169.14, 119.76000000000002, 168.54, 120.31000000000002); ctx.bezierCurveTo(168.07, 120.74000000000002, 167.84, 121.35000000000002, 167.4, 121.82000000000002); ctx.bezierCurveTo(166.64000000000001, 122.66000000000003, 166.12, 122.85000000000002, 165.05, 123.25000000000003); ctx.bezierCurveTo(164.14600587138946, 123.48134199054587, 163.2112539949289, 123.56908043738028, 162.28, 123.51000000000003); ctx.bezierCurveTo(162.06, 123.49000000000004, 160.72, 123.81000000000003, 161.2, 124.17000000000003); ctx.bezierCurveTo(161.39999999999998, 124.33000000000003, 161.95999999999998, 124.43000000000004, 161.82999999999998, 124.81000000000003); ctx.bezierCurveTo(161.60034517620645, 125.31751264704667, 161.2703942628317, 125.77332112610513, 160.85999999999999, 126.15000000000003); ctx.bezierCurveTo(160.6, 126.39000000000003, 160.35999999999999, 126.99000000000004, 160.04, 127.07000000000004); ctx.bezierCurveTo(159.41, 127.23000000000003, 158.66, 127.11000000000004, 158.01, 127.17000000000003); ctx.bezierCurveTo(157.16, 127.24000000000002, 156.53, 127.45000000000003, 155.81, 127.90000000000003); ctx.bezierCurveTo(155.41, 128.15000000000003, 154.65, 128.36000000000004, 154.47, 128.84000000000003); ctx.bezierCurveTo(154.17, 128.44000000000003, 153.77, 128.14000000000004, 153.65, 127.64000000000003); ctx.bezierCurveTo(153.38, 127.74000000000002, 153.25, 128.07000000000002, 153.13, 128.30000000000004); ctx.bezierCurveTo(153.03, 128.45000000000005, 152.53, 128.50000000000003, 152.34, 128.57000000000005); ctx.bezierCurveTo(151.47, 128.97000000000006, 151.17000000000002, 128.89000000000004, 150.24, 128.90000000000006); ctx.bezierCurveTo(150.74, 128.30000000000007, 150.18, 128.06000000000006, 150.01000000000002, 127.50000000000006); ctx.bezierCurveTo(149.77, 126.71000000000005, 149.56000000000003, 125.83000000000006, 149.05, 125.17000000000006); ctx.bezierCurveTo(148.61, 124.61000000000006, 148, 124.22000000000006, 147.45000000000002, 123.78000000000006); ctx.bezierCurveTo(146.91000000000003, 123.34000000000006, 146.61, 122.80000000000005, 146.17000000000002, 122.28000000000006); ctx.bezierCurveTo(145.87, 121.93000000000006, 145.12, 121.25000000000006, 145.47000000000003, 120.73000000000006); ctx.bezierCurveTo(145.84000000000003, 120.21000000000006, 146.01000000000002, 119.83000000000006, 146.70000000000002, 119.87000000000006); ctx.bezierCurveTo(147.46, 119.91000000000007, 148.20000000000002, 120.21000000000006, 148.95000000000002, 119.97000000000006); ctx.bezierCurveTo(149.29000000000002, 119.85000000000005, 149.58, 120.01000000000006, 149.88000000000002, 120.13000000000005); ctx.bezierCurveTo(150.15000000000003, 120.24000000000005, 150.54000000000002, 119.99000000000005, 150.79000000000002, 119.91000000000005); ctx.bezierCurveTo(149.29000000000002, 119.07000000000005, 148.59000000000003, 117.05000000000005, 148.66000000000003, 115.41000000000005); ctx.bezierCurveTo(148.68000000000004, 115.03000000000006, 148.86, 114.72000000000006, 148.91000000000003, 114.37000000000005); ctx.bezierCurveTo(148.94000000000003, 113.99000000000005, 148.85000000000002, 113.62000000000005, 148.84000000000003, 113.25000000000004); ctx.bezierCurveTo(148.84000000000003, 112.97000000000004, 148.89000000000004, 112.51000000000005, 148.74000000000004, 112.25000000000004); ctx.bezierCurveTo(148.60000000000005, 112.06000000000004, 148.24000000000004, 112.21000000000004, 148.26000000000005, 111.88000000000004); ctx.bezierCurveTo(148.29000000000005, 111.45000000000003, 148.12000000000006, 110.86000000000004, 148.03000000000006, 110.44000000000004); ctx.bezierCurveTo(147.96000000000006, 110.14000000000004, 147.53000000000006, 110.08000000000004, 147.31000000000006, 109.94000000000004); ctx.bezierCurveTo(146.61000000000007, 109.51000000000003, 147.51000000000005, 108.86000000000004, 146.11000000000007, 108.64000000000004); ctx.bezierCurveTo(145.78000000000006, 108.60000000000004, 145.88000000000008, 108.86000000000004, 145.52000000000007, 108.59000000000005); ctx.bezierCurveTo(145.02763114922203, 107.94535294208787, 144.5862927627436, 107.26328452663952, 144.20000000000007, 106.55000000000004); ctx.bezierCurveTo(143.74000000000007, 105.71000000000004, 143.80000000000007, 104.67000000000004, 143.62000000000006, 103.75000000000004); ctx.fillStyle="red"; ctx.fill(); ctx.strokeStyle="black"; ctx.stroke();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Path2D SVG String
Path2D Commands
Drawing Context Commands

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Path2D SVG String	197661.8 Ops/sec
Path2D Commands	46793.5 Ops/sec
Drawing Context Commands	17534.5 Ops/sec

Related benchmarks:

Html Canvas Draw (version: 1)

Comparing performance of: Path2D SVG String vs Path2D Commands vs Drawing Context Commands

Created: one year ago by: Guest

Jump to the latest result

Path2D SVG String

Path2D Commands

Drawing Context Commands

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A