JSFiddle - React, Tailwind, and code Playground

by val2048

HTML

<style>
    body {
        margin: 0px;
        padding: 0px;
    }
</style>
<canvas id="myCanvas" width="1000" height="1000"></canvas>

JavaScript

var imagesrc = "https://3deye-archives.s3.amazonaws.com/archives/DEFAULT%20WEB%20SITE/thumbnails/ver_8/camid_121/zoom_3/2015-02-10/459774.jpg?AWSAccessKeyId=AKIAICUSYKMMJJIXBAKQ&Expires=1423652085&Signature=nP6%2FVzsNF5QGl41kCynq25xcDrU%3D"

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var w = 200;
var h = 150;

imageObj.onload = function () {
    // 	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    var row = 1;
    for (var col = 1; col < 10; col++) {
        context.drawImage(imageObj, col * w, row * h, w, h, col * w, 0, w, h);
        context.globalCompositeOperation = "lighter";
        context.drawImage(imageObj, col * w - w, row * h, w, h, col * w, 0, w, h);
    }


};
imageObj.src = imagesrc;