JSFiddle - React, Tailwind, and code Playground

by vixing

HTML

<canvas id="canvas" width="320" height="240" style="border: solid darkblue 1px;background-color: aliceblue"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    context.strokeRect(0.5, 0.5, 10, 10);
    context.arc(5.5, 5.5, 3, 0, Math.PI);
    context.rect(3, 3, 1, 1);
    context.rect(7, 3, 1, 1);
    context.stroke();

    var img = new Image();
    img.src = canvas.toDataURL();
    context.drawImage(img, 10, 10); // works

    context.beginPath();
    var pattern = context.createPattern(img, "repeat"); // doesn't work
    context.fillStyle = pattern;
    context.fillRect(20, 20, 100, 100);
    context.fill();

    context.beginPath();
    var pattern2 = context.createPattern(canvas, "repeat"); // doesn't work
    context.fillStyle = pattern2;
    context.fillRect(120, 20, 100, 100);
    context.fill();