fix(waffle): remove alpha artifacts (#2139)

This commit fixes artifacts when rendering the waffle chart using semi-opaque colors.

e2e/tests/waffle_stories.test.ts

@@ -16,4 +16,9 @@ test.describe('Waffle', () => {
       'http://localhost:9001/?path=/story/waffle-alpha--simple&globals=theme:light&knob-show table for debugging=&knob-ascending sort=true',
     );
   });
+  test('no stroke artifacts when using semi-transparent colors', async ({ page }) => {
+    await common.expectChartAtUrlToMatchScreenshot(page)(
+      'http://localhost:9001/?path=/story/waffle-alpha--test&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;theme:light&knob-use alpha=true',
+    );
+  });
 });

packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_wrapped_renderers.ts

@@ -41,23 +41,22 @@ export function renderWrappedPartitionCanvas2d(
 
     const fWidth = x1 - x0;
     const fPadding = Math.min(padding, MAX_PADDING_RATIO * fWidth);
-    const paintedWidth = fWidth - fPadding;
-    const paintedHeight = y1 - y0 - padding;
-    const cornerRadius = 2 * cornerRatio * Math.min(paintedWidth, paintedHeight);
-    const halfRadius = cornerRadius / 2;
+    const w = fWidth - fPadding;
+    const h = y1 - y0 - padding;
+    const x = x0 + fPadding;
+    const y = y0 + padding / 2;
+    const r = cornerRatio * Math.min(w, h);
 
     ctx.fillStyle = fillColor;
-    ctx.strokeStyle = fillColor;
-    ctx.lineWidth = cornerRadius;
+
     ctx.beginPath();
-    ctx.rect(
-      x0 + fPadding + halfRadius,
-      y0 + padding / 2 + halfRadius,
-      paintedWidth - cornerRadius,
-      paintedHeight - cornerRadius,
-    );
+    ctx.moveTo(x + r, y);
+    ctx.arcTo(x + w, y, x + w, y + h, r);
+    ctx.arcTo(x + w, y + h, x, y + h, r);
+    ctx.arcTo(x, y + h, x, y, r);
+    ctx.arcTo(x, y, x + w, y, r);
+    ctx.closePath();
     ctx.fill();
-    ctx.stroke();
   });
 
   ctx.restore();

storybook/stories/waffle/2_test.story.tsx

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { boolean } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
@@ -15,6 +16,7 @@ import { useBaseTheme } from '../../use_base_theme';
 import { colorBrewerCategoricalStark9, discreteColor, productPriceLookup } from '../utils/utils';
 
 export const Example: ChartsStory = (_, { title, description }) => {
+  const useOpaqueColor = boolean('use alpha', false);
   return (
     <Chart title={title} description={description} className="story-chart">
       <Settings
@@ -45,7 +47,8 @@ export const Example: ChartsStory = (_, { title, description }) => {
             groupByRollup: (d: Datum) => d.products_price,
             nodeLabel: (d: Datum) => productPriceLookup[d].name,
             shape: {
-              fillColor: (nodeKey, sortIndex) => discreteColor(colorBrewerCategoricalStark9.slice(1))(sortIndex),
+              fillColor: (nodeKey, sortIndex) =>
+                discreteColor(colorBrewerCategoricalStark9.slice(1), useOpaqueColor ? 0.5 : 1)(sortIndex),
             },
           },
         ]}