JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<img...

CSS

img {

}

JavaScript

var example = document.querySelectorAll('img')[0],
    payload = document.querySelectorAll('img')[1];

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var margin = 20;
var padding = 10;

setTimeout(function () {
    
canvas.width = 100 + margin + 100 + margin + 100 + padding * 2;
canvas.height = 100 + margin + 100 + margin + 100 + margin + 100 + padding * 2;

context.drawImage(example, 0 + padding, 0, 100, 100, 5, 20, 70, 70);
    
context.font = "14px helvetica";
context.fillText("Select all images with flowers.", 80, 60)

context.fillStyle = '#d30202';
context.fillRect((100 + margin) * 0 + padding/2, (100 + margin) * 0 + 100 + margin - padding /2, 100 + padding, 100 + padding);
context.fillRect((100 + margin) * 1 + padding/2, (100 + margin) * 0 + 100 + margin - padding /2, 100 + padding, 100 + padding);
context.fillRect((100 + margin) * 2 + padding/2, (100 + margin) * 0 + 100 + margin - padding /2, 100 + padding, 100 + padding);
    
context.fillRect((100 + margin) * 0 + padding/2, (100 + margin) * 1 + 100 + margin - padding /2, 100 + padding, 100 + padding);
context.fillRect((100 + margin) * 1 + padding/2, (100 + margin) * 1 + 100 + margin - padding /2, 100 + padding, 100 + padding);
context.fillRect((100 + margin) * 2 + padding/2, (100 + margin) * 1 + 100 + margin - padding /2, 100 + padding, 100 + padding);
    
context.fillRect((100 + margin) * 0 + padding/2, (100 + margin) * 2 + 100 + margin - padding /2, 100 + padding, 100 + padding);
context.fillRect((100 + margin) * 1 + padding/2, (100 + margin) * 2 + 100 + margin - padding /2, 100 + padding, 100 + padding);
context.fillRect((100 + margin) * 2 + padding/2, (100 + margin) * 2 + 100 + margin - padding /2, 100 + padding, 100 + padding);
    
    
context.drawImage(payload, 0, 0, 100, 100, (100 + margin) * 0 + padding, (100 + margin) * 0 + 100 + margin, 100, 100);  
context.drawImage(payload, 100, 0, 100, 100, (100 + margin) * 1 + padding, (100 + margin) * 0 + 100 +...