JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<canvas id="canvas"></canvas>

CSS

#canvas {
width: 800px;
height: 800px;
background: #dadada;
}

JavaScript

// Ustawienia canvasa
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;

// Funkcja rysująca fraktal
function drawFractal(x, y, size) {
  if (size < 1) {
    return;
  }

  // Ustawienia kolorów
  ctx.fillStyle = 'black';
  ctx.strokeStyle = 'white';

  // Rysowanie kształtu fraktala
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + size, y);
  ctx.lineTo(x + size, y + size);
  ctx.lineTo(x, y + size);
  ctx.closePath();
  ctx.stroke();
  
  // Wywołanie funkcji dla kolejnych poziomów fraktala
  const newSize = size / 2;
  drawFractal(x, y, newSize);
  drawFractal(x + newSize, y, newSize);
  drawFractal(x + newSize, y + newSize, newSize);
  drawFractal(x, y + newSize, newSize);
}

// Wywołanie funkcji rysującej fraktal
drawFractal(0, 0, canvas.width);