JSFiddle - React, Tailwind, and code Playground

by denisz

HTML

<div id="app"></div>

CSS

body {
  background: green;
}
canvas {
  border: 1px solid red;
}

JavaScript

const rootNode = document.getElementById('app');

const imageLink = 'https://jsfiddle.net/img/about/oskar.jpg';
const img = document.createElement('img');
img.src = imageLink;

const scale = 25;
const top = 10;
const left = 0;

const canvas = document.createElement('canvas');

canvas.width = 7000;
canvas.height = 4000;

canvas.style.width = '700px';
canvas.style.height = '400px';

const canvas2 = document.createElement('canvas');
canvas2.width = 100;
canvas2.height = 100;
canvas2.style.width = '100px';
canvas2.style.height = '100px';




const ctx = canvas.getContext('2d');
const ctx2 = canvas2.getContext('2d');

const image = document.getElementById('source');

img.onload = () => {

    const sx = left;
    const sy = top;
    const sWidth = canvas.width / scale;//3626;
    const sHeight = canvas.height / scale ;//5439;
    const dx = 0;
    const dy = 0;
    const dWidth = canvas.width;
    const dHeight = canvas.height;
    
		ctx.filter = 'grayscale()';
    ctx.drawImage(img, sx,sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
    //ctx.globalCompositeOperation = 'hard-light';
    ctx.filter = 'none';
    ctx.fillStyle = 'hsla(131, 49%, 53%, 0.1)';
		ctx.fillRect(0, 0, canvas.width, canvas.height);
    

    //ctx2.putImageData(area, 0, 0);
    
    const photo = ctx.getImageData(0, 0, 100, 100); 
    ctx2.fillStyle = 'red';
		ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
}




rootNode.appendChild(canvas);
rootNode.appendChild(canvas2);