i'm a rookie and i try to learn by myself from different sources html css and now i'm on the block of JS
I'm actually doing a snake game but i have differents issues , the body of my snake supposed to be 3 blocks width , and he is also supposed to move with the arrow key !!
I'm kind stuck and request your knowledge to let me find the light again :)
//* I'm french and hope my english is correct *//
window.onload = function()
{
var canvasWidth = 900;
var canvasHeight = 600;
var blockSize = 30;
var ctx;
var delay = 100;
var snakee;
init();
function init()
{
var canvas = document.createElement('canvas')
canvas.width = canvasWidth;
canvas.height = canvasHeight;
canvas.style.border = "1px solid"
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
snakee = new Snake([[6,4],[5,4],[4,4],[3,4],[2,4]], "right");
refreshCanvas();
}
function refreshCanvas()
{
ctx.clearRect (0,0,canvasWidth, canvasHeight);
snakee.draw();
snakee.advance();
setTimeout(refreshCanvas, delay);
}
function drawBlock(ctx, position)
{
var x = position[0] * blockSize;
var y = position[1] * blockSize;
ctx.fillRect(x ,y , blockSize , blockSize );
}
function Snake(body, _direction)
{
this.body = body;
this.direction = "right";
this.draw = function ()
{
ctx.save();
ctx.fillStyle = "#ff0000";
for(var i = 0; i < this.body.lenght; i++);
{
drawBlock(ctx, this.body[i]);
}
ctx.restore();
};
this.advance = function()
{
var nextPosition = this.body[0].slice();
switch(this.direction)
{
case "left":
nexPosition[0] -= 1;
break;
case "right":
nextPosition[0] += 1;
break;
case "down":
nextPosition[1] -= 1;
break;
case "up":
nextPosition[1] += 1;
break;
default:
throw("Invalid Direction");
}
this.body.unshift(nextPosition);
this.body.pop();
};
this.setDirection = function(newDirection)
{
var allowedDirections;
switch(this.direction)
{
case "left":
case "right":
allowedDirections = ["up", "donw"];
break;
case "down":
case "up":
allowedDirections = ["left","right"]
break;
default:
throw("Invalid Direction");
}
if(allowedDirections.indexOf(newDirection) > -1 )
{
this.direction = newDirection;
}
};
}
}
document.addEventListener = function handleKeyDown(e)
{
const key = e.keyCode;
var newDirection;
switch(key)
{
case 37:
newDirection = "left";
break;
case 38:
newDirection = "right";
break;
case 39:
newDirection = "up";
break;
case 40:
newDirection = "down";
break;
default:
return;
}
snakee.setDirection(newDirection);
}
addEventListener is a function and takes at least two arguments
it should be:
document.addEventListener('keydown', (e) => {
let code = e.keyCode;
})
Where the first arg is the type of event to handle and the second is the callback - handling the event.
I've noticed a few bugs in your code:
for(var i = 0; i < this.body.*lenght*; i++); << remove semicolon, lenght is typo
case "down":
nextPosition[1] -= 1; << should incrementing
break;
case "up":
nextPosition[1] += 1; << should decrementing
break;
Also the addEventListener code should be inside the window.onload statement
or else it will not see the snakee object.
This code simply won't work for a full blown snake program, because
each block of the snake can have a separate direction, but it's a start.
Related
I am attempting to code a rudimentary game but can't get the paddle to move. the code throws no errors. I'm working from a tutorial and know this code (https://drive.google.com/file/d/10-dH62BYlvPY20OeZo5VPWP92jWXvgjE/view) to work fine.
"use strict";
//gameParameters
const height = 550;
const width = height;
const border = 15;
const paddleHeight = 15;
const paddleWidth = 45;
const paddleSpeed = 0.7; //fraction of screen width/sec
//colors
const colorBackground = 'black';
const colorBorder = 'pink';
const colorPaddle = 'pink';
//definitions
const direction = {
left: 0,
right: 1,
stop: 2
}
//gameCanvas
var canv = document.createElement('canvas');
canv.width = width;
canv.height = height;
document.body.appendChild(canv);
//context
var ctx = canv.getContext('2d');
ctx.lineWidth = border;
//game Variables
var paddle;
//start new game
newGame();
//event listeners
document.addEventListener("keydown", keyDown);
document.addEventListener("keyup", keyUp);
// gameLoop
var timeDelta, timeLast;
requestAnimationFrame(loop);
function loop(timeNow) {
if (!timeLast) {
timeLast = timeNow;
}
//calcTimeDifference
timeDelta = (timeNow - timeLast) * 0.001; //ms => sec
timeLast = timeNow;
//update
updatePaddle(timeDelta);
//draw
drawBackground();
drawBorder();
drawPaddle();
//call next loop
requestAnimationFrame(loop);
}
function drawBackground() {
ctx.fillStyle = colorBackground;
ctx.fillRect(0, 0, canv.width, canv.height);
}
function drawBorder() {
let halfBorder = border * 0.5;
ctx.strokeStyle = colorBorder;
ctx.beginPath();
ctx.moveTo(halfBorder, height);
ctx.lineTo(halfBorder, halfBorder);
ctx.lineTo(width - halfBorder, halfBorder);
ctx.lineTo(width - halfBorder, height);
ctx.stroke();
}
function drawPaddle() {
ctx.fillStyle = colorPaddle;
ctx.fillRect(paddle.x - paddle.w * 0.5, paddle.y - paddle.h * 0.5, paddle.w, paddle.h);
}
function keyDown(ev) {
switch (ev.keyCode) {
case 37: //left arrow
movePaddle(direction.left);
break;
case 39: //right arrow
movePaddle(direction.right);
break;
}
}
function keyUp(ev) {
switch (ev.keyCode) {
case 37: //left arrow
case 39: //right arrow
movePaddle(direction.stop);
break;
}
}
function movePaddle(direction) {
switch (direction) {
case direction.left:
paddle.xv = -paddle.spd;
break;
case direction.right:
paddle.xv = paddle.spd;
break;
case direction.stop:
paddle.xv = 0;
break;
}
}
function newGame() {
paddle = new paddle();
}
function updatePaddle(delta) {
paddle.x += paddle.xv * delta;
}
function paddle() {
this.w = paddleWidth;
this.h = paddleHeight;
this.x = canv.width / 2;
this.y = canv.height - this.h * 3;
this.spd = paddleSpeed * width
this.xv = 0;
}
<body></body>
The mistake was in the function movePaddle. You had named the argument direction, and when you used direction.left, you meant to use the globally defined direction object, however since the function argument is local, your function argument was being used, which was just an integer.
Simply rename the function argument to fix the code.
"use strict";
//gameParameters
const height = 550;
const width = height;
const border = 15;
const paddleHeight = 15;
const paddleWidth = 45;
const paddleSpeed = 0.7; //fraction of screen width/sec
//colors
const colorBackground = 'black';
const colorBorder = 'pink';
const colorPaddle = 'pink';
//definitions
const direction = {
left: 0,
right: 1,
stop: 2
}
//gameCanvas
var canv = document.createElement('canvas');
canv.width = width;
canv.height = height;
document.body.appendChild(canv);
//context
var ctx = canv.getContext('2d');
ctx.lineWidth = border;
//game Variables
var paddle;
//start new game
newGame();
//event listeners
document.addEventListener("keydown", keyDown);
document.addEventListener("keyup", keyUp);
// gameLoop
var timeDelta, timeLast;
requestAnimationFrame(loop);
function loop(timeNow) {
if (!timeLast) {
timeLast = timeNow;
}
//calcTimeDifference
timeDelta = (timeNow - timeLast) * 0.001; //ms => sec
timeLast = timeNow;
//update
updatePaddle(timeDelta);
//draw
drawBackground();
drawBorder();
drawPaddle();
//call next loop
requestAnimationFrame(loop);
}
function drawBackground() {
ctx.fillStyle = colorBackground;
ctx.fillRect(0, 0, canv.width, canv.height);
}
function drawBorder() {
let halfBorder = border * 0.5;
ctx.strokeStyle = colorBorder;
ctx.beginPath();
ctx.moveTo(halfBorder, height);
ctx.lineTo(halfBorder, halfBorder);
ctx.lineTo(width - halfBorder, halfBorder);
ctx.lineTo(width - halfBorder, height);
ctx.stroke();
}
function drawPaddle() {
ctx.fillStyle = colorPaddle;
ctx.fillRect(paddle.x - paddle.w * 0.5, paddle.y - paddle.h * 0.5, paddle.w, paddle.h);
}
function keyDown(ev) {
switch (ev.keyCode) {
case 37: //left arrow
movePaddle(direction.left);
break;
case 39: //right arrow
movePaddle(direction.right);
break;
}
}
function keyUp(ev) {
switch (ev.keyCode) {
case 37: //left arrow
case 39: //right arrow
movePaddle(direction.stop);
break;
}
}
function movePaddle(to_direction) {
switch (to_direction) {
case direction.left:
paddle.xv = -paddle.spd;
break;
case direction.right:
paddle.xv = paddle.spd;
break;
case direction.stop:
paddle.xv = 0;
break;
}
}
function newGame() {
paddle = new paddle();
}
function updatePaddle(delta) {
paddle.x += paddle.xv * delta;
}
function paddle() {
this.w = paddleWidth;
this.h = paddleHeight;
this.x = canv.width / 2;
this.y = canv.height - this.h * 3;
this.spd = paddleSpeed * width
this.xv = 0;
}
<body></body>
Hello I want to know how can I make the canvas shape circle in the below code.
The code is about moving a object with keyboard keys. I tried to make the circle out of this box but it just disappeared and i am not really sharp. Can some help me make this canvas circle without affecting code.
sorry but i have to write something more because SO says body has all code... i don't know what to say now (make the canvas circle)(make the canvas circle)(make the canvas circle)
<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="myCanvas" width='800' height='800' border-radius= ></canvas>
</body>
</html>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
let circle = new Path2D(); // <<< Declaration
circle.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'lightblue';
context.fill(circle); // <<< pass circle to context
context.lineWidth = 10;
context.strokeStyle = '#000066';
context.stroke(circle);
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
//event listener
window.addEventListener("keydown", onKeyDown, false);
window.addEventListener("keyup", onKeyUp, false);
function onKeyDown(event) {
var keyCode = event.keyCode;
switch (keyCode) {
case 68: //d
keyD = true;
break;
case 83: //s
keyS = true;
break;
case 65: //a
keyA = true;
break;
case 87: //w
keyW = true;
break;
}
}
function onKeyUp(event) {
var keyCode = event.keyCode;
switch (keyCode) {
case 68: //d
keyD = false;
break;
case 83: //s
keyS = false;
break;
case 65: //a
keyA = false;
break;
case 87: //w
keyW = false;
break;
}
}
//neccessary variables
var tickX = 10;
var tickY = 10;
var keyW = false;
var keyA = false;
var keyS = false;
var keyD = false;
//main animation function
function drawStuff() {
window.requestAnimationFrame(drawStuff);
var canvas = document.getElementById("myCanvas");
var c = canvas.getContext("2d");
c.clearRect(0, 0, 800, 800);
c.fillStyle = "lightblue";
c.fillRect(tickX, tickY, 100, 100);
if (keyD == true) {
tickX += 1;
}
if (keyS == true) {
tickY += 1;
}
if (keyA == true) {
tickX--;
}
if (keyW == true) {
tickY--;
}
}
window.requestAnimationFrame(drawStuff);
</script>
I moved the circle code into the drawstuff function as that is where it has to run, and removed the use of fillRect.
You can see the result here:
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
//event listener
window.addEventListener("keydown", onKeyDown, false);
window.addEventListener("keyup", onKeyUp, false);
function onKeyDown(event) {
var keyCode = event.keyCode;
switch (keyCode) {
case 68: //d
keyD = true;
break;
case 83: //s
keyS = true;
break;
case 65: //a
keyA = true;
break;
case 87: //w
keyW = true;
break;
}
}
function onKeyUp(event) {
var keyCode = event.keyCode;
switch (keyCode) {
case 68: //d
keyD = false;
break;
case 83: //s
keyS = false;
break;
case 65: //a
keyA = false;
break;
case 87: //w
keyW = false;
break;
}
}
//neccessary variables
var tickX = 10;
var tickY = 10;
var keyW = false;
var keyA = false;
var keyS = false;
var keyD = false;
//main animation function
function drawStuff() {
window.requestAnimationFrame(drawStuff);
var canvas = document.getElementById("myCanvas");
var c = canvas.getContext("2d");
c.clearRect(0, 0, 200, 200);
let circle = new Path2D(); // <<< Declaration
circle.arc(100 + tickX, 100 + tickY, 70, 0, 2 * Math.PI, false);
c.fillStyle = 'purple';
c.fill(circle); // <<< pass circle to context
c.lineWidth = 10;
c.strokeStyle = '#000066';
c.stroke(circle);
if (keyD == true) {
tickX += 1;
}
if (keyS == true) {
tickY += 1;
}
if (keyA == true) {
tickX--;
}
if (keyW == true) {
tickY--;
}
}
window.requestAnimationFrame(drawStuff);
Focus this area, then use keys <b>d, s, a, w</b><br />
<canvas id="myCanvas" width='200' height='200' style="border: 1px solid #f4f4f4" ></canvas>
I am trying to make the ball move when I press space, but I can't seem to figure out how to do it.
It is vanilla Javascript with createjs libary. Can anybody help me and give me a little hint?
window.addEventListener('load', preload);
var canvas = document.getElementById('myCanvas');
var stage, queue;
var ball;
var paddle;
var settings = {
lives: 3,
points: 0,
speed: 3,
ballMovingSpeed: 7
}
var fingerDown = false;
var keys = {
left: false,
right: false,
shoot: false
}
var ballSettings = {
ballRadius: 10,
dx: 2,
dy: -2
}
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
function preload() {
"use strict";
stage = new createjs.Stage("myCanvas");
queue = new createjs.LoadQueue(true);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tickHappened);
drawPaddle();
drawBall();
window.addEventListener('keydown', keyDown);
window.addEventListener('keyup', keyUp);
}
function drawBall() {
"use strict"
ball = new createjs.Shape();
ball.graphics.beginFill('red').drawCircle(0, 0, 10);
stage.addChild(ball);
ball.x = 400;
ball.y = 535;
canvasHeight += ballSettings.dy;
canvasWidth += ballSettings.dx;
}
// paddle Movement
//--------------------------------*
function keyDown(e) {
"use strict";
console.log(e.keyCode);
switch (e.keyCode) {
case 37:
keys.left = true;
break;
case 39:
keys.right = true;
break;
case 32:
keys.shoot = true;
break;
}
}
function keyUp(e) {
"use strict";
switch (e.keyCode) {
case 37:
keys.left = false;
break;
case 39:
keys.right = false;
break;
case 32:
keys.shoot = false;
break;
}
}
function movePaddle() {
"use strict";
if (keys.left) {
paddle.x -= settings.speed;
if (paddle.x < 0 + paddle.regX) {
paddle.x = 0 + paddle.regX;
}
} else if (keys.right) {
paddle.x += settings.speed;
if (paddle.x > canvasWidth - paddle.width + paddle.regX) {
paddle.x = canvasWidth - paddle.width + paddle.regX;
}
} else if (keys.shoot) {
console.log("shoot ball");
if (canvasWidth + ballSettings.dx > canvas.width - ballSettings.ballRadius || canvasWidth + ballSettings.dx < ballSettings.ballRadius) {
ballSettings.dx = -ballSettings.dx;
}
if (canvasHeight + ballSettings.dy > canvas.height - ballSettings.ballRadius || canvasHeight + ballSettings.dy < ballSettings.ballRadius) {
ballSettings.dy = -ballSettings.dy;
}
}
}
function tickHappened(e) {
"use strict";
movePaddle();
stage.update(e);
}
So in order to have your object move, you need a few things. First, you need to re-draw it, which you seem to have set to re-draw 60 times per second. Next, you have to update the position of your object. Your ball needs two things for that, a velocity X and a velocity Y. With each tick, you'll set the ball.x += ball.velX so that each time it'll move it's position along with it's moving velocity, and once it hits something just set the ball.velX = -ball.velX.
I'm not sure what project you're working on but I'm assuming it is somewhat similar to pong, if you'd like to review or use some of the code I used on my own pong game feel free - http://pongio.bitballoon.com/
I am trying to use Javascript to reset my canvas to its original state. But the action does nothing when Ok is pressed. It gives me a dialog box when it is pressed, but it does not reset the canvas to its original state.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var GAME_SPEED = 1000 / 60; //game rate
var x = 100;
var y = 100;
var sideLength = 10;
var leftKey = false;
var rightKey = false;
var upKey = false;
var downKey = false;
var spaceKey = false;
var aKey = false;
var sKey = false;
var wKey = false;
var dKey = false;
var enterKey = false;
var bX = 100;
var bY = 100;
var sideLengthZ = 10;
var ctx;
window.onload = function() {
c = document.getElementById("myCanvas");
c.width = window.innerWidth * 0.9;
c.height = window.innerHeight * 0.9;
ctx = c.getContext('2d');
window.setInterval(function() {
draw();
draw2();
}, GAME_SPEED);
}
document.onkeyup = function(event) {
event.preventDefault();
switch (event.keyCode) {
case 37:
leftKey = false;
break;
case 39:
rightKey = false;
break;
case 38:
upKey = false;
break;
case 40:
downKey = false;
break;
case 32:
spaceKey = false;
break;
case 65:
aKey = false;
break;
case 83:
sKey = false;
break;
case 68:
dKey = false;
break;
case 87:
wKey = false;
break;
case 13:
enterKey = false;
break;
}
}
document.onkeydown = function(event) {
event.preventDefault();
switch (event.keyCode) {
case 37:
leftKey = true;
break;
case 39:
rightKey = true;
break;
case 38:
upKey = true;
break;
case 40:
downKey = true;
break;
case 32:
spaceKey = true;
break;
case 65:
aKey = true;
break;
case 83:
sKey = true;
break;
case 68:
dKey = true;
break;
case 87:
wKey = true;
break;
case 13:
enterKey = true;
break;
}
}
function draw() {
if (leftKey == true) {
x--;
}
if (rightKey == true) {
x++;
}
if (upKey == true) {
y--;
}
if (downKey == true) {
y++;
}
if (spaceKey == true) {
sideLength++;
}
ctx.fillStyle = "#000000";
ctx.fillRect(x, y, sideLength, sideLength);
}
function draw2() {
if (aKey == true) {
bX--;
}
if (dKey == true) {
bX++;
}
if (wKey == true) {
bY--;
}
if (sKey == true) {
bY++;
}
if (enterKey == true) {
sideLengthZ++;
}
var b = document.getElementById("myCanvas");
var cntxt2 = ctx;
ctx.fillStyle = "#F00000";
ctx.fillRect(bX, bY, sideLengthZ, sideLengthZ);
}
function itReset()
{
var erase = confirm("Are you sure you want to delete?");
if (erase == true)
context.clearRect();
else
return false;
}
var ctx = document.querySelector("myCanvas").getContext("2d"),
angle = Math.random() * 360, // start angle (for HSL)
angleDlt = 60, // 60° ahead
step = 1; // "speed" for change
function createGradient() {
var gr = ctx.createLinearGradient(0, 0, 500, 0); // create gradient
gr.addColorStop(0, "hsl(" + (angle % 360) + ",100%, 50%)"); // start color
gr.addColorStop(0.5, "hsl(" + ((angle + (angleDlt/2)) % 360) + ",100%, 50%)");
gr.addColorStop(1, "hsl(" + ((angle + angleDlt) % 360) + ",100%, 50%)");
ctx.fillStyle = gr; // set as fill style
ctx.fillRect(0, 0, 500, 500); // fill area
}
</script>
</head>
<body>
<!--Marlon Jacques -->
<canvas id="myCanvas" style="border: 5px solid">
Your browser does not support the canvas element.
</canvas>
<button onclick="itReset()">Reset</button>
</body>
</html>
Use context.clearRect to clear the canvas.
Note that you need to get the context for your canvas because the context has the drawing (and clearing) methods--the canvas element itself does not have those methods.
function itReset(){
var erase = confirm("Are you sure you want to delete?");
if (erase == true){
ctx.clearRect(0,0,c.width,c.height);
}else{
return false;
}
Can anybody help me with my problem please? I've managed to clear the canvas before redrawing my game character, but was wondering how to stop the screen from flickering as the character moves in JavaScript. Thank you for your help. Help much appreciated. Here's my code.
var avatarX = 0;
var avatarY = 267;
var avatarImage;
var counter = 1;
var XWIDTH = 0;
var WIDTH = 400;
var dx = 5;
var tt;
window.addEventListener('keydown', KeyDown);
function setUpGame() { //This is the function that is called from the html document.
var gameCanvas = document.getElementById("gameCanvas"); //Declare a new variable & assigns it the id of the CANVAS from the html document.
avatarImage = new Image(); //Declaring a new variable. This is so that we can store the image at a later date.
avatarImage.src = "img/avatar.png"; //Ditto from above.
gameCanvas.getContext("2d").drawImage(avatarImage, Math.random() * 100, avatarY);
var tt = setInterval(function(){counTer()},1000);
setInterval(handleTick, 25);
}
function KeyDown(evt) {
switch (evt.keyCode) {
case 39: /*Arrow to the right*/
if(avatarX + dx <WIDTH && avatarX + dx >XWIDTH) {
avatarX += dx;
gameCanvas.width = gameCanvas.width;
}
break;
case 37: /*Arrow to the left*/
if(avatarX - dx >XWIDTH) {
avatarX -= dx;
gameCanvas.width = gameCanvas.width;
}
break;
}
}
function counTer() {
if(counter == 60) {
clearInterval(tt);
} else {
counter++;
gameCanvas.width = 400;
gameCanvas.getContext("2d").font = "18px Iceland";
gameCanvas.getContext("2d").textBaseline = "top";
gameCanvas.getContext("2d").fillText("Seconds: " + counter, 5, 5);
}
}
function handleTick() {
gameCanvas.getContext("2d").drawImage(avatarImage, avatarX, avatarY);
}
Some observations:
Create the context once at the top of your code instead of every time you use it.
Set the font and textBaseline once at the top of your code instead of every time you use it.
Clear the canvas only when needed (only in handleTick).
Draw the clock-timer at the same time you draw the avatar (saves 1 canvas clearing).
Attach an onload function to avatarImage so you know the image is ready to drawImage
Here's modified code -- it's untested so you'll need to review it ;)
Good luck with your project!
var avatarX = 0;
var avatarY = 267;
var avatarImage;
var counter = 1;
var XWIDTH = 0;
var WIDTH = 400;
var dx = 5;
var tt;
var gameCanvas;
var context;
window.addEventListener('keydown', KeyDown);
function setUpGame() { //This is the function that is called from the html document.
gameCanvas = document.getElementById("gameCanvas"); //Declare a new variable & assigns it the id of the CANVAS from the html document.
context=gameCanvas.getContext("2d");
context.font = "18px Iceland";
context.textBaseline = "top";
avatarImage = new Image(); //Declaring a new variable. This is so that we can store the image at a later date.
avatarImage.onload=function(){
// avatarImage is now fully loaded and ready to drawImage
context.drawImage(avatarImage, Math.random() * 100, avatarY);
// start the timer
tt = setInterval(function(){counTer()},1000);
setInterval(handleTick, 25);
}
avatarImage.src = "img/avatar.png"; //Ditto from above.
}
function KeyDown(evt) {
switch (evt.keyCode) {
case 39: /*Arrow to the right*/
if(avatarX + dx <WIDTH && avatarX + dx >XWIDTH) {
avatarX += dx;
}
break;
case 37: /*Arrow to the left*/
if(avatarX - dx >XWIDTH) {
avatarX -= dx;
}
break;
}
}
function counTer() {
if(counter == 60) {
clearInterval(tt);
} else {
counter++;
}
}
function handleTick() {
context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(avatarImage, avatarX, avatarY);
context.fillText("Seconds: " + counter, 5, 5);
}