JSFiddle - React, Tailwind, and code Playground

by Gustavo Rodrigues

HTML

<canvas id="canvas"></canvas>
<img src="https://blog.apnic.net/wp-content/uploads/2014/11/https-1.jpg" class="hidden" />

CSS

body { padding: 0; margin: 0; }
canvas { width: 600px; height: 600px; transform: translateZ(0deg); border: solid 1px black; }
.hidden { display: none; width: 256px; height: 256px; }

JavaScript

var canvas = document.getElementById("canvas");
var image_test = document.querySelector(".hidden");
wheel = canvas.getContext("2d");      

  var img = new Image();
  var root = this;
  img.src = image_test.src;
  img.onload = function() { 
  	console.log(this)
    for (var i = 0; i < 10; i++) {
    	wheel.drawImage(this, root.i * 10, 0 , 140 , 140);
     }
  }