JSFiddle - React, Tailwind, and code Playground

by jmjpro

HTML

<input name="image" type="radio" value="img1"/>
	  <img id="img1" src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" width="219" height="150">
	  <input name="image" type="radio" value="img2"/>
	  <img id="img2" src="http://www.html5canvastutorials.com/demos/assets/yoda.jpg" width="219" height="150">
	  <input name="frame" type="radio" value="frame1"/>
	  <img id="frame1" src="http://gallery.yopriceville.com/var/resizes/Frames/Classical_Horizontal_Transparent_Frame.png?m=1365717600" width="286" height="235">
	  <input name="frame" type="radio" value="frame2"/>
	  <img id="frame2" src="http://premiumfoto.ru/wp-content/uploads/2014/06/rama-lepninoj.png" width="286" height="235">
    <canvas id="imageAndFrame" width="286" height="235"></canvas>
	  <button id="display">Display in Room</button>
	<canvas id="room" width="800" height="600"></canvas>

JavaScript

var canvas, context, canvasRoom, contextRoom, imageObjRoom;
	canvas = $('#imageAndFrame');
    context = canvas.getContext('2d');
    canvasRoom = $('#room');
    contextRoom = canvasRoom.getContext('2d');
    imageObjRoom = new Image();
		
	imageObjRoom.onload = function() {
	  contextRoom.drawImage(imageObjRoom, 0, 0);
    };
	imageObjRoom.src = 'http://wallpaperscraft.com/image/10400/800x600.jpg';
	$('#display').on( 'click', function() {
		contextRoom.drawImage(canvas, 400, 10);
	});

	$('input[name="image"]').on( 'change', function() {
		alert( 'hello');
		var imageId = $(this).val();
	var imageObj = $( '#' + imageId )[0];
	context.drawImage(imageObj, 35, 40, 219, 150);
    });

	$('input[name="frame"]').on( 'change', function() {
	var imageId = $(this).val();
	var imageObj = $( '#' + imageId )[0];
	context.drawImage(imageObj, 0, 0, 286, 235);
    });