sandrabosk · April 27, 2020 18:46
diff --git a/canvas-translate-rotate.html b/canvas-translate-rotate.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Canvas Animations</title>
  </head>
  <body>
 
    <canvas id="canvas" width="300" height="300"></canvas>

    <!-- add js file in the end when the DOM is already loaded -->
    <script src="index.js"></script>
  </body>
 </html>
diff --git a/index.js b/index.js
 const canvas = document.querySelector('#canvas');
 const ctx = canvas.getContext('2d');

 let img = new Image();
 let h = 1;
 function animate() {
  img.src = '../canvas-pattern-shadow/images/wall-paper.png';
  setInterval(draw, 100);
 }

 function draw() {
  h += 0.1;
  // uncomment when demo in the beginning without img
  // ctx.fillStyle = "rgba(0,153,255,0.4)";
  // ctx.font = "15px monospace";

  ctx.save();
  // start drawing on x=150, y=150
  // original values of x and y are 0, but with this translate they become this value + 150 (both)
  ctx.translate(150, 150);

  // .rotate(angleInRadians)
  ctx.rotate(h);
  // after rotation, move y for 20px additionally (150+20 = 170)
  ctx.translate(0, 20);

  // ctx.fillText("super", 70, 70);
  ctx.drawImage(img, 5, 5); // /if we don't pass width and height they will be taken from the image itself
  // ctx.drawImage(img, 4, 4, 10, 10); // but we can pass it if we want to change the original width and height
  ctx.restore();
 }

 // un-comment to see how it works
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Canvas Animations</title>
	</head>
	<body>

	<canvas id="canvas" width="300" height="300"></canvas>

	<!-- add js file in the end when the DOM is already loaded -->
	<script src="index.js"></script>
	</body>
	</html>
	const canvas = document.querySelector('#canvas');
	const ctx = canvas.getContext('2d');

	let img = new Image();
	let h = 1;
	function animate() {
	img.src = '../canvas-pattern-shadow/images/wall-paper.png';
	setInterval(draw, 100);
	}

	function draw() {
	h += 0.1;
	// uncomment when demo in the beginning without img
	// ctx.fillStyle = "rgba(0,153,255,0.4)";
	// ctx.font = "15px monospace";

	ctx.save();
	// start drawing on x=150, y=150
	// original values of x and y are 0, but with this translate they become this value + 150 (both)
	ctx.translate(150, 150);

	// .rotate(angleInRadians)
	ctx.rotate(h);
	// after rotation, move y for 20px additionally (150+20 = 170)
	ctx.translate(0, 20);

	// ctx.fillText("super", 70, 70);
	ctx.drawImage(img, 5, 5); // /if we don't pass width and height they will be taken from the image itself
	// ctx.drawImage(img, 4, 4, 10, 10); // but we can pass it if we want to change the original width and height
	ctx.restore();
	}

	// un-comment to see how it works