JSFiddle - React, Tailwind, and code Playground

by lauraliparulo

HTML

<body>
    Drag&Drop images <br /> <br />
	<input type=checkbox id="Referto">
	<!-- Punkt 1 -->
	Gaga layer
	<br />
	<div id="container"></div>
	<script
		src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>

</body>
</html>

JavaScript

var referto = document.getElementById('Referto');

		var stage = new Kinetic.Stage({
			container : 'container',
			width : 578,
			height : 200
		});
		var layer = new Kinetic.Layer();

		var layer2 = new Kinetic.Layer();

		var imageObj = new Image();
		var imageOver = new Image();

		imageObj.onload = function() {

			var yoda = new Kinetic.Image({
				x : 140,
				y : stage.getHeight() / 2 - 59,
				image : imageObj,
				width : 106,
				height : 118,
				draggable : true
			});

			// add the shape to the layer
			layer.add(yoda);


			// add the layer to the stage
			stage.add(layer);

			// apply grayscale filter to second image
			filteredYoda.applyFilter(Kinetic.Filters.Grayscale, null,
					function() {
						layer.draw();
					});
		};

		imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

		function load() {

			imageOver.onload = function() {

				var gaga = new Kinetic.Image({
					x : 40,
					y : stage.getHeight() / 2 - 59,
					image : imageOver,
					width : 106,
					height : 118,
					draggable : true
				});

				// add the shape to the layer
				layer2.add(gaga);

				// add the layer to the stage
				stage.add(layer2);

			};

			imageOver.src = 'https://twimg0-a.akamaihd.net/profile_images/3221348438/9b0734b7fa0d6576f2d1511ce9f7f5e0.jpeg';

		}

		//checkboxes 
		referto.addEventListener('click', function() {
			if (this.checked) {
				load();
				stage.add(layer2);
			}

			else if (!this.checked) {
				layer2.clear();
			}

		});