JSFiddle - React, Tailwind, and code Playground

by emanuelbsilva

HTML

<div class="container">
  <p>
  You WON!
  </p>
  <canvas id="canvas" width="500" height="500"></canvas>
</div>

CSS

.container {
  position: relative;
  background: yellow;
  width: 500px;
  border: 1px solid black;
  height: 500px;
}

p {
  position: absolute;
  left: 100px;
  top: 300px;
}

#canvas {
  background: black;
  position: absolute;
  top: 0;
  right:0;
}

JavaScript

var ocean = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/1THUMB_SIZE0px-Clouds_over_the_Atlantic_Ocean.jpg";

var montains = "https://upload.wikimedia.org/wikipedia/commons/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg";

var canvas = document.getElementById('canvas');
var canvasSize = {
	width: canvas.width,
  height: canvas.height
}
var ctx = canvas.getContext('2d');

var THUMB_SIZE = 50;

var canvasDiff = document.createElement('canvas');
canvasDiff.width = canvasSize.width / THUMB_SIZE;
canvasDiff.height = canvasSize.height / THUMB_SIZE;
var ctxDiff = canvasDiff.getContext('2d');

var canvasBlack = document.createElement('canvas');
canvasBlack.width = canvasSize.width / THUMB_SIZE;
canvasBlack.height = canvasSize.height / THUMB_SIZE;
var ctxBlack = canvasBlack.getContext('2d');

var mousePos = { x:0, y:0 };
var drawing = false;


loadImage(montains)
	.then((img) => {
  	let imgSize = {
    	width: img.width,
      height: img.height
    };
  	let size = getImageSize({
   		container: canvasSize,
      image: img,
      size: 'cover'
    });
    console.log(size, imgSize, canvasSize);
  	ctx.drawImage(img, 0, 0, size.width, size.height);
    canvas.style.background = 'transparent';

		ctxBlack.fillRect(0, 0, canvasSize.width, canvasSize.height);
		ctxDiff.fillRect(0, 0, canvasSize.width, canvasSize.height);
  })
	.then(() => {
    canvas.addEventListener("mousedown", function (e) {
      drawing = true;
    }, false);
    canvas.addEventListener("mouseup", function (e) {
      drawing = false;
    }, false);
    canvas.addEventListener("mousemove", function (e) {
      mousePos = getMousePos(canvas, e);
    }, false);
    
    canvas.addEventListener("touchstart", function (e) {
     var touches = e.changedTouches;
       if(touches.length > 0){
      	mousePos = {
        	x: touches[0].pageX,
          y: touches[0].pageY
        };
      }
      drawing = true;
    }, false);
   ...