JSFiddle - React, Tailwind, and code Playground

by Elena Shevchuk

HTML

<h2>Заливка двух контуров</h2>
  <div>
    <canvas id="figure" width=500 height=500></canvas>
  </div>
  <div>
    <canvas id="figure-2" width=500 height=500></canvas>
  </div>

JavaScript

window.onload = main;


function main() {
  var canvas = document.getElementById("figure");
  var canvas2 = document.getElementById("figure-2")
  var c = document.getElementById("figure").getContext("2d");
  var c2 = document.getElementById("figure-2").getContext("2d");

  // Фигура
  c.font = "bold 60pt sans-serif";
  c.lineWidth = 2;
  c.strokeStyle = "#000";
  c.strokeRect(175, 25, 50, 325);
  c.strokeText("<canvas>", 15, 330);
  polygon(c, 3, 200, 225, 200);
  polygon(c, 3, 200, 225, 100, 0, true);
  c.clip();
  c.lineWidth = 10;
  c.stroke();
  c.fillStyle = "#aaa";
  c.fillRect(175, 25, 50, 325);
  c.fillStyle = "#888";
  c.fillText("<canvas>", 15, 330);

  c2.drawImage(c.canvas, 0, 0);
  var cNoise = new ColorNoise(c2, 15, 0, 0, 400, 400, 10);
  var c2Noise = new ColorNoise(c, 15, 0, 0, 400, 400, 400, true);
  setInterval(function() {
    cNoise.run();
    c2Noise.run();
  }, 100);

}

function ColorNoise(c, n, x, y, w, h, shiftCounter, crossline) {
  this.pixels = c.getImageData(x, y, w, h);
  this.data = this.pixels.data;
  this.counter = 0;
  this.shiftCounter = shiftCounter || 10;
  this.changeBaseColor();
  this.crossline = crossline || false;
  this.c = c;
  this.x = x;
  this.y = y;
}

ColorNoise.prototype = {
  setRGB: function (data, i) {
    var data = this.data;
    var pos = this.colorRandom.pos;
    var color = this.colorRandom.color;
    switch (pos) {
      case 1:
        data[i - 2] = color;
        data[i - 3] = this.noiseColor();
        data[i - 4] = this.noiseColor();
        break;
      case 2:
        data[i - 2] = this.noiseColor();
        data[i - 3] = color;
        data[i - 4] = this.noiseColor();
        break;
      case 3:
        data[i - 2] = this.noiseColor();
        data[i - 3] = this.noiseColor();
        data[i - 4] = color;
        break;
      default:
        console.log("ERROR");
    }
  },
  noiseColor: function () {// возвращает от 1 до 255 c учетом шума
    var shift = 255 - this.noise;
    return Math.random()...