JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Koch Curve</title>
</head>
<body>
<canvas id="my_canvas" width="700" height="600"></canvas>
<script>
var myCanvas = document.getElementById("my_canvas");
var ctx = myCanvas.getContext("2d");
function generateSequence() {
    var sequence = "0";
    for(var i=0; i < 20; i++) {
        var parts = sequence.split("");
        var complement = "";
        for(var j=0; j<parts.length; j++) {
            complement = complement + 
                      (parts[j] == "0" ? "1" : "0");
        }
        sequence += complement;
    }
    return sequence;
}
function draw() {
  var sequence = generateSequence();
  var parts = sequence.split("");
  ctx.translate(0, myCanvas.height);
  ctx.beginPath();
  ctx.moveTo(0,0);
  for(var i = 0; i < parts.length; i++) {
    if(parts[i] == "0") {
        ctx.translate(0,0.1);
        ctx.lineTo(0,0.1);            
    } else {
        ctx.rotate(Math.PI/3);
    }
  }
  ctx.stroke();
}

draw();
</script>

    <!-- all code goes here -->
</body>
</html>