JSFiddle - React, Tailwind, and code Playground

by julekker

HTML

<p><button onClick="jsfunction.canvas()"><img src="http://www.psdgraphics.com/wp-content/uploads/2012/04/add-button.jpg" alt="Afbeelding toevoegen" width="40" height="40"/></button></p>
<p><button onClick="jsfunction.exportcanvas()"><img src="http://www.veryicon.com/icon/png/Application/Toolbar%20Icons/Save.png" alt="Afbeelding toevoegen" width="40" height="40" /></button></p>

JavaScript

var parentdiv = document.createElement('parentdiv');
	parentdiv.setAttribute('id', "workspace");
	parentdiv.style.position = "relative";
	parentdiv.style.background = "blue";
	parentdiv.width = 800;
	parentdiv.height = 600;
	document.body.appendChild(parentdiv);
		
var jsfunction = (function funct($){
	canvas = document.createElement('canvas');
	canvas.setAttribute('id', "canvas");
	imageObj1 = new Image();
	finalcanvas: null;
	finalcontext: null;
	finalimg = new Image();

	return{
		canvas: function(){
            var url = prompt("Geef de URL van de afbeelding:");
            if (url '!==' null){
            canvas.width = 800;
            canvas.height = 600;
            parentdiv.appendChild(canvas);
            canvas.style.position = "absolute";
            canvas.style.left = "0px";
            canvas.style.top = "50px";
            canvas.style.zIndex = 1;
            canvas.style.border = "3px solid #000000";
            context = canvas.getContext("2d");
            imageObj1.src = url;
            context.drawImage(imageObj1, 0, 0, 300, 300);
            }
		},
				
		exportcanvas: function(){
			finalcanvas = document.createElement('canvas');
			finalcanvas.setAttribute('id', "finalcanvas");
			finalcanvas.width = 800;
			finalcanvas.height = 600;
			finalcontext = finalcanvas.getContext('2d');
			finalcontext.drawImage(canvas, 0, 0);
			window.location = finalcanvas.toDataURL("image/png");
			alert("dhshdfhfdh");
		}
	};
 })();