JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<div id="box">
    <div id="m">
        text
        <canvas width="300px" height="300px"></canvas>
    </div>
</div>

CSS

#box {
    width: 150px;
    height: 150px;
    background-color: yellow;
    border-radius: 50px;
    overflow: hidden;
}

#m {
    border: 2px green solid;
    -webkit-mask-position: 0 0;
    -webkit-mask-size: 200px 200px;
    -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, 
       color-stop(0.00,  rgba(0,0,0,1)),
       color-stop(0.25,  rgba(0,0,0,1)),
       color-stop(0.50,  rgba(0,0,0,0)),
       color-stop(0.75,  rgba(0,0,0,0)),
       color-stop(1.00,  rgba(0,0,0,0)));
}

JavaScript

var $canvas = $("canvas");

if ($canvas[0].getContext) {
    var context = $canvas[0].getContext('2d');
    context.scale(3, 3);
    context.strokeStyle = 'black';
    context.lineWidth = 1;
    context.moveTo(20.5, 0);
    context.lineTo(20.5, 10);
    context.moveTo(22.5, 0);
    context.lineTo(22.5, 5);
    context.moveTo(24.5, 0);
    context.lineTo(24.5, 10);
    context.fillText('12gergergerg3.4', 20, 20);
    context.stroke();
    
    var $c = $("<canvas>").attr({
                        'width': '100px',
                        'height': '100px'
                    });
    //$("#box").append($c);
    var ctx = $c[0].getContext('2d');
    ctx.scale(1/3, 1/3);
    ctx.drawImage($canvas[0], 0, 0);
    $("#box").append($c);
}