We Keep Coding

Call tile.draw_tile doesn’t display anything

I am trying to create a small game to learn javascript.Everything works fine except my Rect class.As a matter of fact key_click works fine when it executes some console.log, but doesn’t display anything with tile.draw_tile() (nor gives any error).Could you help me?
var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let Rect = class {
constructor(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
draw_tile() {
c.fillStyle = "red";
c.fillRect(this.x, this.y, this.width, this.height);
}
}
var mouse = {
x: undefined,
y: undefined,
key_move: window.addEventListener('mousemove',(event)=>{
mouse.x = event.clientX;
mouse.y= event.clientY;
}),
key_click:window.addEventListener('click',(event)=>{
tile.draw_tile();
})
}
let tile = new Rect(mouse.x, mouse.y, 30, 30);
main = function(){
mouse.key_move;
mouse.key_click;
window.requestAnimationFrame(main);
}
window.requestAnimationFrame(main);

Deleting on a canvas

Im trying to create and delete arcs on events, to adding parts works fine and i'm saving them in arrays so i could delete them on calling an event listener by somehow that's not happening , I mean its working fine in the console as in the array values are decremented by its not updating in the canvas
Code:
<script>
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = window.innerWidth;
myCanvas.height = 500;
var c = myCanvas.getContext("2d");
var myArr = [];
myCanvas.addEventListener("click", function(){
var x = event.x;
var y = event.y;
var radius = 10;
myArr.push(new CreateCircle(x, y, radius, "#34495e"));
console.log( myArr );
});
window.addEventListener('keydown', function(){
myArr.splice(0,1);
console.log(myArr);
});
function CreateCircle(x, y, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI*2);
c.fillStyle = this.color;
c.fill();
}
this.draw();
}
</script>
Do i need to add an delete function in the constructor function and call it on keydown event , how do i go on doing it/fixing it ?

To remove the circles, you have to clear the canvas, and then redraw it with the modified array of circles.
First of all, return an object from the CreateCircle method, so you have something to work with. There's no need for instances here.
Secondly, you could clear the canvas by resetting it's width, and then redraw based on the array, like this
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = window.innerWidth;
myCanvas.height = 500;
var c = myCanvas.getContext("2d");
var myArr = [];
myCanvas.addEventListener("click", function() {
var x = event.x;
var y = event.y;
var radius = 10;
myArr.push(CreateCircle(x, y, radius, "#34495e"));
});
window.addEventListener('keydown', function() {
myArr.splice(0, 1);
myCanvas.width = myCanvas.width;
myArr.forEach(function(circle) {
CreateCircle(circle.x, circle.y, circle.r, circle.c)
})
});
function CreateCircle(x, y, radius, color) {
c.beginPath();
c.arc(x, y, radius, 0, Math.PI * 2);
c.fillStyle = color;
c.fill();
return {x: x, y: y, r: radius, c: color};
}
<canvas id="myCanvas"></canvas>

You don't update canvas anywhere. You need to create some sort of "render" function which will clear previously rendered frame and then loops through circles in array and call .draw on all of them.
Tip:
context.clearRect method is useful for clearing canvas.

Javascript: I cannot draw image on the canvas

I already create my canvas on my page, however when I try to import an image on the canvas, it does not appear, here are the code I used. (the makeGameArea is a method I created to make a canvas on the webpage, the code of this method is not shown because it is so long to put it here)
Here are the following code that should have problem
var myGameArea2 = makeGameArea(700, 150, "myArea", "white");
var myContext2 = myGameArea2.getContext("2d");
var myImage = new drawImage(myContext2, "sonic.gif", 91, 97, 0, 0);
myImage.draw();
function drawImage(ctx, src, width, height, x, y){
this.image = new Image();
this.image.src = src;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.draw = function(){
this.image.onload = function(){
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
}
}
}
Is there anything wrong with my drawImage() method?

HTMLImage.onload will fire only once per src setting.
Here you are attaching your handler in the draw method, which I guess will be called later on. At this moment, the event will already have fired, and hence will never be called, since it won't fire again unless you reset its src.
Fixed code block:
function drawImage(ctx, src, width, height, x, y){
this.image = new Image();
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.draw = function(){
ctx.drawImage(this.image, this.x, this.y, this.width, this.height));
};
// if you want it to draw as soon as possible
this.image.onload = this.draw.bind(this);
this.image.src = src;
}

canvas fillRect is not working

I have no idea what is wrong. This is being made on a completely new site, so there are no cache problems, and the javascript console isn't returning errors. The canvas spans over the whole page, and is tagged properly. Here is the script:
<script type = "text/javascript">
var game = document.getElementById("game");
var context = game.getContext("2d");
var gamePieces = []
function gamePiece(width, height, color, x, y){
this.width = width;
this.height = height;
this.x = x;
this.y = y;
update = function(){
context.fillStyle = color;
context.fillRect(this.x, this.y, this.height, this.width);
}
gamePieces[gamePieces.length] = this
}
var p1 = gamePiece(50, 50, "blue", 0, 0);
function update(){
context.clearRect(0, 0, game.width, game.height);
for(var i = 0; i < gamePieces.length; i++){
gamePieces[i].update();
}
}
</script>

Nevermind. I figured it out.
Everything is running smoothly, I just needed to add another context.fillstyle and context.fillRect() statement. derpyderp.

object.draw() shows last defined image on al object.draw() calls

i'm pretty new with javascript/ programming and i'm experimenting with some basic canvas game script i wrote. I'm trying to make 4 background images move left or right at a different speed on a key event. So far so good, it works fine.
The problem starts when i draw the 4 images on the canvas. Al the x,y and h,w settings work fine, accept the image itself. on de canvas it shows the same (last defined) image for al the drawings. I have now idea where i went wrong on this one.
Hope you guys can help me out!
Thnx in advance
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas test game/ movement</title>
</head>
<body>
<canvas id="myCanvas" width="1600" height="1000"></canvas>
<footer></footer>
</body>
<script>
var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d'),
img = new Image();
var newImage = function(){
this.image = function(name){
img.src="./images/" + name;
};
this.setSize = function(w, h){
this.w = w;
this.h = h;
};
this.setPosition = function(x, y){
this.x = x;
this.y = y;
};
this.setSpeed = function(speed){
this.speed = speed;
};
this.changePosition = function(direction){
if (direction){
this.x = this.x + this.speed;
} else {
this.x = this.x - this.speed;
}
};
this.draw = function(){
context.drawImage(img, this.x, this.y, this.w, this.h);
};
};
var move = function(direction){
achtergrond.changePosition(direction);
maan.changePosition(direction);
landschapAchter.changePosition(direction);
landschapVoor.changePosition(direction);
};
var achtergrond = new newImage();
achtergrond.image("galaxy.png");
achtergrond.setSize(1600, 1000);
achtergrond.setPosition(0, 0);
achtergrond.setSpeed(0);
var maan = new newImage();
maan.image("maan.png");
maan.setSize(400, 400);
maan.setPosition(200, 100);
maan.setSpeed(1);
var landschapAchter = new newImage();
landschapAchter.image("landschapAchter.png");
landschapAchter.setSize(3200, 500);
landschapAchter.setPosition(0, 450);
landschapAchter.setSpeed(2);
var landschapVoor = new newImage();
landschapVoor.image("landschapVoor.png"); // In the browser all 4 (achtergrond, maan, landschapAchter and landschapVoor) objects show this img on object.draw()
landschapVoor.setSize(4294, 400);
landschapVoor.setPosition(0, 600);
landschapVoor.setSpeed(3);
var checkKey = function(e){
e = e || window.event;
if (e.keyCode == '37') {
move(1);
} else if (e.keyCode == '39') {
move(0);
}
// Move images on key event
context.clearRect ( 0, 0 , 1600 , 1000 );
achtergrond.draw();
maan.draw();
landschapAchter.draw();
landschapVoor.draw();
};
window.onload = function(){
maan.draw();
landschapAchter.draw();
landschapVoor.draw();
achtergrond.draw();
}
document.onkeydown = checkKey;
</script>
</html>

I think you missed this with while specifying src tag :)
var newImage = function(){
this.image = function(name){
this.src="./images/" + name;
};
Try this.