clipping-5-canvas.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<title>Test for clipping of border-radius</title>

<style>

canvas {

  border-color: transparent;

  border-style: solid;

  border-width: 1px 1px 3px 3px;

  padding: 0px 1px 1px 5px;

  /* border + padding: 1px 2px 4px 8px */

  margin: 17px;

  border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px;

</style>

<canvas id="canvas" height="100" width="200"></canvas>

<script>

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

var cx = canvas.getContext("2d");

cx.fillStyle="lime";

cx.fillRect(0, 0, 200, 100);

</script>