<commit_before><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Canvas</title>
  <link rel="stylesheet" href="demo-only-stuff/styles.css" media="screen" title="no title" charset="utf-8">
</head>
<body>

  <script do-not-document="true" type="text/javascript" src="../lib/index.js"></script>
  <script do-not-document="true" type="text/javascript" src="demo-only-stuff/create-canvas.js"></script>

  <script do-not-document="true" type="text/javascript">
    var BLACK = '#000';
    var RED = '#f88';
    var GREEN = '#7d7';
    var BLUE = '#99f';
  </script>

  <div id="container" class="container">

    <h2>
      Getting started
    </h2>

    <h3>
      Create a new sensible canvas interface
    </h3>

    <pre>var Canvas = require('sensible-canvas-interface');

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

var canvas = new Canvas(element);</pre>

    <h2>
      Solid shape methods
    </h2>

    <h3>
      Rectangle
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .fillRect(20, 20, 50, 50, RED)
        .strokeRect(30, 30, 50, 50, BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .fillRect(20, 20, 50, 50)
        .strokeRect(30, 30, 50, 50);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .plotRect(25, 40, 50, 20)
        .fill()
        .stroke();
    </script>

    <h3>
      Rounded rectangle
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .fillRoundedRect(20, 20, 50, 50, 10, RED)
        .strokeRoundedRect(30, 30, 50, 50, 10, BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .fillRoundedRect(20, 20, 50, 50, 100)
        .strokeRoundedRect(30, 30, 50, 50, 100);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .plotRoundedRect(25, 40, 50, 20, 100)
        .fill()
        .stroke();
    </script>

    <h3>
      Circle
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .fillCircle(45, 45, 25, false, RED)
        .strokeCircle(55, 55, 25, false, BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .fillCircle(45, 45, 30, false)
        .strokeCircle(55, 55, 30, true);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .plotCircle(50, 50, 20)
        .fill()
        .stroke();
    </script>

    <h3>
      Polygons
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .fillPoly(45, 45, 25, 3, false, RED)
        .strokePoly(55, 55, 25, 4, false, BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .fillPoly(45, 45, 30, 5, false)
        .strokePoly(55, 55, 30, 6, true);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .plotPoly(50, 50, 20, 8)
        .fill()
        .stroke();
    </script>

    <h3>
      Pixel
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .fillPixel(45, 45, BLACK)
        .strokePixel(55, 55, RED);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLACK)
        .setStroke(GREEN)
        .fillPixel(45, 45)
        .strokePixel(55, 55);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLACK)
        .setStroke(BLUE)
        .plotPixel(50, 50)
        .fill()
        .stroke();
    </script>

    <h2>
      Open shape methods
    </h2>

    <h3>
      Line
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .beginPath()
        .strokeLine(25, 25, 75, 75, RED);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setStroke(GREEN)
        .beginPath()
        .strokeLine(25, 25, 75, 75);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setStroke(BLUE)
        .beginPath()
        .plotLine(25, 25, 75, 50)
        .plotLine(75, 50, 25, 75)
        .stroke();
    </script>

    <h3>
      Path
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .beginPath()
        .fillPath([25, 25, 75, 50, 25, 75], RED)
        .translate(10, 0)
        .beginPath()
        .strokePath([25, 25, 75, 50, 25, 75], BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .beginPath()
        .fillPath([[25, 25], [75, 50], [25, 75]])
        .translate(10, 0)
        .beginPath()
        .strokePath([[25, 25], [75, 50], [25, 75]]);

    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .beginPath()
        .plotPath([{x: 25, y: 25}, {x: 75, y: 50}, {x: 25, y: 75}])
        .closePath()
        .fill()
        .stroke();
    </script>

    <h2>
      Path plotting methods
    </h2>

    <h3>
      Arc
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .beginPath()
        .fillArc(45, 45, 25, 0, Math.PI, false, RED)
        .beginPath()
        .strokeArc(55, 55, 25, 0, Math.PI, true, BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .beginPath()
        .fillArc(45, 45, 25, 0, Math.PI, false)
        .beginPath()
        .strokeArc(55, 55, 25, 0, Math.PI, true);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .beginPath()
        .plotArc(50, 50, 25, 0, Math.PI)
        .closePath()
        .fill()
        .stroke();
    </script>

    <h3>
      Ellipse
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .beginPath()
        .fillEllipse(45, 45, 25, 25, 0, 0, Math.PI, false, RED)
        .beginPath()
        .strokeEllipse(55, 55, 25, 25, 0, 0, Math.PI, true, BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .beginPath()
        .fillEllipse(45, 45, 25, 10, 0, 0, Math.PI, false)
        .beginPath()
        .strokeEllipse(55, 55, 25, 10, 0, 0, Math.PI, true);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .beginPath()
        .plotEllipse(50, 50, 10, 25, Math.PI / 4, 0, Math.PI)
        .closePath()
        .fill()
        .stroke();
    </script>

  </div>

  <script do-not-document="true" type="text/javascript" src="demo-only-stuff/display-source.js"></script>

</body>
</html>
<commit_msg>Singular polygon header<commit_after><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Canvas</title>
  <link rel="stylesheet" href="demo-only-stuff/styles.css" media="screen" title="no title" charset="utf-8">
</head>
<body>

  <script do-not-document="true" type="text/javascript" src="../lib/index.js"></script>
  <script do-not-document="true" type="text/javascript" src="demo-only-stuff/create-canvas.js"></script>

  <script do-not-document="true" type="text/javascript">
    var BLACK = '#000';
    var RED = '#f88';
    var GREEN = '#7d7';
    var BLUE = '#99f';
  </script>

  <div id="container" class="container">

    <h2>
      Getting started
    </h2>

    <h3>
      Create a new sensible canvas interface
    </h3>

    <pre>var Canvas = require('sensible-canvas-interface');

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

var canvas = new Canvas(element);</pre>

    <h2>
      Solid shape methods
    </h2>

    <h3>
      Rectangle
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .fillRect(20, 20, 50, 50, RED)
        .strokeRect(30, 30, 50, 50, BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .fillRect(20, 20, 50, 50)
        .strokeRect(30, 30, 50, 50);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .plotRect(25, 40, 50, 20)
        .fill()
        .stroke();
    </script>

    <h3>
      Rounded rectangle
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .fillRoundedRect(20, 20, 50, 50, 10, RED)
        .strokeRoundedRect(30, 30, 50, 50, 10, BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .fillRoundedRect(20, 20, 50, 50, 100)
        .strokeRoundedRect(30, 30, 50, 50, 100);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .plotRoundedRect(25, 40, 50, 20, 100)
        .fill()
        .stroke();
    </script>

    <h3>
      Circle
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .fillCircle(45, 45, 25, false, RED)
        .strokeCircle(55, 55, 25, false, BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .fillCircle(45, 45, 30, false)
        .strokeCircle(55, 55, 30, true);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .plotCircle(50, 50, 20)
        .fill()
        .stroke();
    </script>

    <h3>
      Polygon
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .fillPoly(45, 45, 25, 3, false, RED)
        .strokePoly(55, 55, 25, 4, false, BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .fillPoly(45, 45, 30, 5, false)
        .strokePoly(55, 55, 30, 6, true);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .plotPoly(50, 50, 20, 8)
        .fill()
        .stroke();
    </script>

    <h3>
      Pixel
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .fillPixel(45, 45, BLACK)
        .strokePixel(55, 55, RED);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLACK)
        .setStroke(GREEN)
        .fillPixel(45, 45)
        .strokePixel(55, 55);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLACK)
        .setStroke(BLUE)
        .plotPixel(50, 50)
        .fill()
        .stroke();
    </script>

    <h2>
      Open shape methods
    </h2>

    <h3>
      Line
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .beginPath()
        .strokeLine(25, 25, 75, 75, RED);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setStroke(GREEN)
        .beginPath()
        .strokeLine(25, 25, 75, 75);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setStroke(BLUE)
        .beginPath()
        .plotLine(25, 25, 75, 50)
        .plotLine(75, 50, 25, 75)
        .stroke();
    </script>

    <h3>
      Path
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .beginPath()
        .fillPath([25, 25, 75, 50, 25, 75], RED)
        .translate(10, 0)
        .beginPath()
        .strokePath([25, 25, 75, 50, 25, 75], BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .beginPath()
        .fillPath([[25, 25], [75, 50], [25, 75]])
        .translate(10, 0)
        .beginPath()
        .strokePath([[25, 25], [75, 50], [25, 75]]);

    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .beginPath()
        .plotPath([{x: 25, y: 25}, {x: 75, y: 50}, {x: 25, y: 75}])
        .closePath()
        .fill()
        .stroke();
    </script>

    <h2>
      Path plotting methods
    </h2>

    <h3>
      Arc
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .beginPath()
        .fillArc(45, 45, 25, 0, Math.PI, false, RED)
        .beginPath()
        .strokeArc(55, 55, 25, 0, Math.PI, true, BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .beginPath()
        .fillArc(45, 45, 25, 0, Math.PI, false)
        .beginPath()
        .strokeArc(55, 55, 25, 0, Math.PI, true);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .beginPath()
        .plotArc(50, 50, 25, 0, Math.PI)
        .closePath()
        .fill()
        .stroke();
    </script>

    <h3>
      Ellipse
    </h3>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .beginPath()
        .fillEllipse(45, 45, 25, 25, 0, 0, Math.PI, false, RED)
        .beginPath()
        .strokeEllipse(55, 55, 25, 25, 0, 0, Math.PI, true, BLACK);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(GREEN)
        .setStroke(BLACK)
        .beginPath()
        .fillEllipse(45, 45, 25, 10, 0, 0, Math.PI, false)
        .beginPath()
        .strokeEllipse(55, 55, 25, 10, 0, 0, Math.PI, true);
    </script>

    <script type="text/javascript">
      var canvas = createCanvas();

      canvas
        .setWidth(100)
        .setHeight(100)
        .setFill(BLUE)
        .setStroke(BLACK)
        .beginPath()
        .plotEllipse(50, 50, 10, 25, Math.PI / 4, 0, Math.PI)
        .closePath()
        .fill()
        .stroke();
    </script>

  </div>

  <script do-not-document="true" type="text/javascript" src="demo-only-stuff/display-source.js"></script>

</body>
</html>

{'fraction_non_alphanumeric': 0.15323241707197113, 'fraction_numerical': 0.06164271271654189, 'mean_word_length': 1.8201571890892279, 'pattern_counts': {'":': 0, '<': 215, '<?xml version=': 0, '>': 215, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3350197', 'n_tokens_mistral': 7168, 'n_tokens_neox': 6120, 'n_words': 1352}