canvas-filter-shadow-and-properties.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/filters/canvas-filter-shadow-and-properties.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<link rel="match" href="canvas-filter-shadow-and-properties-expected.html"/>

<body>

  <canvas id="canvas" width="300" height="300"></canvas>

</body>

<script>

/*

  The expected behavior when both shadow properties and filters are used at the

  same time is that the filter is applied to the elements drawn and the shadow

  properties create another shadow that includes even shadows of the

   filter-generated shadows.

*/

  var canvas = document.getElementById('canvas');

  var ctx = canvas.getContext('2d');

  ctx.shadowColor = 'cyan';

  ctx.shadowOffsetX = 20;

  ctx.shadowOffsetY = 20;

  ctx.filter = 'drop-shadow(10px 10px 0 red)';

  ctx.fillRect(10, 10, 50, 50);

</script>