JSFiddle - React, Tailwind, and code Playground

by jihyng_hd

HTML

<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
</canvas>
<input id=myFile type=file>
<button id="myBtn1">
click 1
</button>
<button id="myBtn2">
click 2
</button>
<button id="myBtn3">
click 3
</button>
<button id="myBtn4">
click 4
</button>
<button id="myBtn5">
click 5
</button>
<button id="myBtn6">
click 6
</button>

<img id=preview width=200 height=200>

JavaScript

var myImg = new Image();

$("#myFile").change(function() {
	var thisReader = new FileReader();
	thisReader.readAsDataURL($(this).get(0).files[0]);
	thisReader.onload = function (thisReaderEvent) {
  	myImg.src = thisReaderEvent.target.result;
    draw1();
  };
});

$("#myBtn1").click(function() {
	draw0();
});
$("#myBtn2").click(function() {
	draw2();
});
$("#myBtn3").click(function() {
	draw3();
});
$("#myBtn4").click(function() {
	draw4();
});
$("#myBtn5").click(function() {
	draw5();
});
$("#myBtn6").click(function() {
	draw6();
});
function draw0() {
	var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.beginPath();
  ctx.arc(300, 300, 270, 0, 2 * Math.PI);
	ctx.lineWidth = 60;
	ctx.strokeStyle = 'rgb(255,115,0)';
	ctx.stroke();
}

function draw1() {
	var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.drawImage(myImg,100,100,600,600,100,100,100,100);
}

function draw2() {
  var ctx = document.getElementById('myCanvas').getContext('2d');
  for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
      ctx.save();
      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
      ctx.translate(10 + j * 100, 10 + i * 100);
      ctx.fillRect(0, 0, 50, 50);
      ctx.restore();
    }
  }
}

function draw3() {
	var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.translate(300,300);
}
function draw4() {
	var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.scale(0.5,0.5);
}
function draw5() {
	var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.globalCompositeOperation = "xor";
}
function draw6() {
  document.getElementById('preview').src = document.getElementById('myCanvas').toDataURL();
}