JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<h1>ctx.drawImage(img, x, y, w, h, dx, dy, dw, dh)</h1>
<button type = "button" onclick = "customize()">change variables</button>
<canvas id = "canvas" width = "480" height = "360"></canvas>
<script>
let source = 0;
let img = new Image();
let x = 0;
let y = 0;
let w = 0;
let h = 0;
let dx = 0;
let dy = 0;
let dh = 0;
let dw = 0;
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
function customize() {
  source = prompt("src?", "https://images-na.ssl-images-amazon.com/images/I/81EgrR1AMQL.png");
	x = prompt("x?", 0);
  y = prompt("y?", 0);
  w = prompt("w?", 80);
  h = prompt("h?", 80);
  dx = prompt("dx?", 0);
  dy = prompt("dy?", 0);
  dw = prompt("dw?", 80);
  dh = prompt("dh?", 80);
  img.src = source;
}
function render() {
	ctx.clearRect(0, 0, 1000, 1000);
  ctx.drawImage(img, x, y, w, h, dx, dy, dw, dh);
}
setInterval(render, 10);
</script>
</body>
</head>
</html>