JSFiddle - React, Tailwind, and code Playground

by HaykoKoryun

HTML

<canvas id="canvas" width="500" height="500"></canvas>
<div id="inputs">
    <label>offset x</label>
    <input name="ofsset_x" type="text" id="offset_x" value="0"/> 
    <label>offset y</label>
    <input name="ofsset_y" type="text" id="offset_y" value="0"/>
    <label>fix</label>
    <input type="checkbox" id="fix" value="0"/>
</div>

CSS

#canvas
{
    border: solid 1px #000;
}

JavaScript

(function()
{
    var image = new Image();
    image.src ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAs1JREFUeNq8VztvE0EQnnsFxbJxlCAEIiAoiC0qOxJpkCAoHRIKLR0VFRJdWugQBRX8EBASDUIkSGlC4XTEpsDiIVEAcsA6x77Hsrs5+24ft7d+6FY6rc8+z8x+M983cwbg9f32yjre3kO+6+by69a2Gd3sQ/6L+jSGdxgFNImVwqKp/WwwAOh3Q/oZn576tqc9hjVnjBGAeEaThyRP+HkEOkJ01brSimGYYJ+ey/TmN/fojhASfClT4Gy9UBp2HAcK5XJmAH/vXzlOgQfKFOzwP6Kvn6fGOmh9lH29IwtAWKjXnWniUSAWobIGhNPsvgH49TM2aJnQX5pX/if8/SP+HICyBgQWoIMGQCUuxBAHEJLvEqt/xpqKBWZevAt9uc4lA2gLCLj/2Icrq5PnP2RuR74YGePlmOiAioqEhuUMGrrP7lEdICro/mFlONcUkD6QlQKhEJE7PQ2Db59A5YNXwg4vRGGzkW7csiFYLLInWq6CUSgJdSSTYa1u6D19kP4bMcDRsPjkLRPAKFhPbsOWwLPOPHD3IRgXLmsFRBFYOpeA/0CpAbIADoWOh52blfpkBdCLaRxngPUxNguMU2fTh5Pz1XQh8pBWCrbx9UjoiAkEnK3ntDCJTAeNDzjfNti1DbBX1sCqXJXOARIf+kUIHBUJAhZB4dotmHceQ0ljHkg0oUwd6MxSfEYUZNsw40OYKGXTMZFks36dFmOSETIpJpXv77+jg8gwBWkyrD0VkxY8asOFIlg4GIP0ibUN3OW6EDSxs9Yedcw3MBqAryhqCQJf8HZRF+aSxjww6KLh+0AbI3Api4btmfR/XHheD8HRYQgDN0y1bc+y6Eiu/T6+Bum8z0xB4mV1M5LlmsrAiZPmseMjpBq/CPdfkZdRrQC4YBbwdgdfN6J9IeMv7cghGb1fYqedsRHICKgWIbOZaFz0hGTHDsd6xfsvwAB8ABqbrMgqHwAAAABJRU5ErkJggg==";
    
    var ctx = document.getElementById("canvas").getContext("2d");
    var ox = document.getElementById("offset_x");
    var oy = document.getElementById("offset_y");
    var fix = document.getElementById("fix");
    
    console.log(ox);
    
    image.onload = render;
    
    function render()
    {
        ctx.clearRect(0,0,500,500)
        ctx.save();
        
        if(fix.checked == 1)
        {
            ctx.translate(ox.value, ox.value);
        }
        var pattern = ctx.createPattern(image, 'repeat');
        ctx.fillStyle = pattern;
        ctx.fillRect
        (
            !fix.checked ? ox.value : 0,
            !fix.checked ? oy.value : 0,
            500,
            500
        );
        
        ctx.restore();
    }
    
    ox.onkeyup = render;
    oy.onkeyup = render;
    fix.onchange =...