Skip to content

Instantly share code, notes, and snippets.

@sandrabosk

sandrabosk/canvas-animations-2.html

Last active February 10, 2022 22:42
Show Gist options
  • Save sandrabosk/3367a83c9a07020296514d7ee05fd94d to your computer and use it in GitHub Desktop.
Save sandrabosk/3367a83c9a07020296514d7ee05fd94d to your computer and use it in GitHub Desktop.
Download ZIP
canvas animations - setTimeout
Raw
canvas-animations-2.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="example" width="500" height="200"></canvas>
<button>SHOOT</button>
<button id="stop">STOP!</button>
<!-- add js file in the end when the DOM is already loaded -->
<script src="index.js"></script>
</body>
</html>
Raw
index.js
// const button = document.querySelector('button');
// const stopButton = document.querySelector('#stop');
// const fireballImg = document.createElement('img'); // create new image object
// // "src" has to point as the image will be used in HTML file
// fireballImg.src = "http://pixelartmaker.com/art/98e8e5fd3a709df.png";
// // set the start position of our image
// let fireballX = 0;
// let fireballY = 0;
// let timeoutId = '';
// const canvas = document.getElementById("example");
// const ctx = canvas.getContext("2d");
// function draw(x, y){
// ctx.clearRect(0, 0, 500, 500); // clear whole canvas - simulates the movement
// ctx.drawImage(fireballImg, x, y, 100, 50); // ctx.drawImage(whichImage, x, y, width, height);
// x += 4; // change position of x coordinate (variable `x` in the global scope)
// // calls the function `draw` again every 20ms
// // and assigns the value of timeoutId to the global variable `timeoutId`
// timeoutId = setTimeout( function () {
// draw(x, y);
// }, 20);
// }
// fireballImg.addEventListener('load', function() {
// button.addEventListener('click', function () {
// draw(fireballX, fireballY);
// });
// stopButton.addEventListener('click', function () {
// clearTimeout(timeoutId);
// });
// });
// --------------------------------------------------------------------- //
const button = document.querySelector('button');
const stopButton = document.querySelector('#stop');
const fireball = {
x: 0,
y: 0,
width: 100,
height: 50,
img: new Image()
}
// const fireballImg = document.createElement('img'); // create new image object
// // "src" has to point as the image will be used in HTML file
// fireballImg.src = "https://pixelartmaker-data-78746291193.nyc3.digitaloceanspaces.com/image/98e8e5fd3a709df.png";
let timeoutId;
const canvas = document.getElementById("example");
const ctx = canvas.getContext("2d");
fireball.img.src = "https://pixelartmaker-data-78746291193.nyc3.digitaloceanspaces.com/image/98e8e5fd3a709df.png";
function draw(x, y){
ctx.clearRect(0, 0, 500, 500); // clear whole canvas - simulates the movement
ctx.drawImage(fireball.img, fireball.x, fireball.y, fireball.width, fireball.height); // ctx.drawImage(whichImage, x, y, width, height);
fireball.x += 4;
// calls the function `draw` again every 20ms
// and assigns the value of timeoutId to the global variable `timeoutId`
timeoutId = setTimeout( () => {
draw(x, y);
}, 20);
}
fireball.img.addEventListener('load', () => {
button.addEventListener('click', () => {
draw(0, 0);
});
stopButton.addEventListener('click', () => {
clearTimeout(timeoutId);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment