We Keep Coding

Change size of drawing marker relative to the speed of the cursor - Javascript

I have made a marker that draws when the mouse click is held down. I now want to change the size of this marker relative to the speed of the cursor. My code is as follows:
class App {
constructor(event, x) {
this.container = this.createContainer();
this.canvas = this.createCanvas();
this.ctx = this.canvas.getContext("2d");
this.addEventListeners();
this.isDrawing = this.letDrawing();
}
createContainer = () => {
const container = document.createElement("div");
container.className = "app-container";
document.body.appendChild(container);
return container;
};
createCanvas = () => {
const canvas = document.createElement("canvas");
canvas.className = "app-canvas";
this.container.appendChild(canvas);
canvas.width = this.container.getBoundingClientRect().width;
canvas.height = this.container.getBoundingClientRect().height;
return canvas;
};
addEventListeners = () => {
this.canvas.addEventListener("mousemove", this.onMouseMove);
this.canvas.addEventListener("mousedown", this.onMouseDown);
document.addEventListener("mouseup", this.onMouseUp);
};
letDrawing = () => {
this.isDrawing = false;
};
onMouseDown = () => {
this.isDrawing = true;
};
onMouseMove = (event) => {
if (this.isDrawing === true) {
this.drawBall(event.x, event.y);
}
};
onMouseUp = () => {
this.isDrawing = false;
};
drawBall = (x, y) => {
this.ctx.beginPath();
this.ctx.arc(x, y, 0, Math.PI * 2);
this.ctx.fillStyle = "#6f0ecf";
this.ctx.fill();
this.ctx.closePath();
};
}
export { App };
I was thinking of using previous position of X and Y, and doing something like below... Can I use deltaX in this scenario?
Any help on how to do this would be much appreciated!!
onMouseMove = (event) => {
if (this.isDrawing === true) {
this.drawBall(event.x, event.y);
this.previousX = this.currentX;
this.currentX = event.x;
distance = this.currentX - this.previousX;
}
};
onMouseMoveSpeed = () => {
const size = speed * 10 + 10;
};
onMouseUp = () => {
this.isDrawing = false;
};
drawBall = (x, y, size) => {
this.ctx.beginPath();
this.ctx.arc(x, y, size, 0, Math.PI * 2);
this.ctx.fillStyle = "#6f0ecf";
this.ctx.fill();
this.ctx.closePath();
};

yes, you'll need to save the last position and the last time the event occured and them compute the speed as the distance from the last position divided by the time difference.
let last = {
x: 0,
y: 0,
time: 0
}
window.onmousemove = function(evt) {
let
x = evt.clientX,
y = evt.clientY,
time = new Date;
let dist = Math.sqrt((last.x - x) ** 2 + (last.y - y) ** 2)
let speed = dist / (time - last.time) * 1000
last = {x, y, time}
console.log('speed=', speed.toFixed(0))
}

How do convert this mouse hover effect in reactjs

I don't know if this makes me lazy or what I just to use this kind method but it doesn't work well in react.
Here is the link of the code
HOVER
So basically my error here is the part of ctx = canvas.getContext('2d') I try to copy all the codes and do this something in my react
useEffect(() => {
const rippleSettings = {
maxSize: 100,
animationSpeed: 5,
strokeColor: [148, 217, 255],
};
const canvasSettings = {
blur: 8,
ratio: 1,
};
function Coords(x, y) {
this.x = x || null;
this.y = y || null;
}
const Ripple = function Ripple(x, y, circleSize, ctx) {
this.position = new Coords(x, y);
this.circleSize = circleSize;
this.maxSize = rippleSettings.maxSize;
this.opacity = 1;
this.ctx = ctx;
this.strokeColor = `rgba(${Math.floor(rippleSettings.strokeColor[0])},
${Math.floor(rippleSettings.strokeColor[1])},
${Math.floor(rippleSettings.strokeColor[2])},
${this.opacity})`;
this.animationSpeed = rippleSettings.animationSpeed;
this.opacityStep = (this.animationSpeed / (this.maxSize - circleSize)) / 2;
};
Ripple.prototype = {
update: function update() {
this.circleSize = this.circleSize + this.animationSpeed;
this.opacity = this.opacity - this.opacityStep;
this.strokeColor = `rgba(${Math.floor(rippleSettings.strokeColor[0])},
${Math.floor(rippleSettings.strokeColor[1])},
${Math.floor(rippleSettings.strokeColor[2])},
${this.opacity})`;
},
draw: function draw() {
this.ctx.beginPath();
this.ctx.strokeStyle = this.strokeColor;
this.ctx.arc(this.position.x, this.position.y, this.circleSize, 0,
2 * Math.PI);
this.ctx.stroke();
},
setStatus: function setStatus(status) {
this.status = status;
},
};
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
console.log(ctx)
const ripples = [];
const rippleStartStatus = 'start';
const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
canvas.style.filter = `blur(${canvasSettings.blur}px)`;
canvas.width = width * canvasSettings.ratio;
canvas.height = height * canvasSettings.ratio;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
let animationFrame;
// Function which is executed on mouse hover on canvas
const canvasMouseOver = (e) => {
const x = e.clientX * canvasSettings.ratio;
const y = e.clientY * canvasSettings.ratio;
ripples.unshift(new Ripple(x, y, 2, ctx));
};
const animation = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const length = ripples.length;
for (let i = length - 1; i >= 0; i -= 1) {
const r = ripples[i];
r.update();
r.draw();
if (r.opacity <= 0) {
ripples[i] = null;
delete ripples[i];
ripples.pop();
}
}
animationFrame = window.requestAnimationFrame(animation);
};
animation();
canvas.addEventListener('mousemove', canvasMouseOver);
})
I removed the part of GUI based on the link because I don't need the settings. So what I want here is the getContext('2d') I don't understand why it is wrong. Can anyone figure out it for me? Should I be asking this question? I feel so unlucky right now hahha badly need help.

Bullets follows mouse position

Im making simple arena shooter in JS and HTML.
right now I wanted to add shooting mechanic,I thought i would use code from my enemy class with bits of tweaking
here:
//differences between objects
let dirx = mouse.x - player.x,
diry = mouse.y - player.y;
//normalizing
let dist = Math.sqrt(dirx * dirx + diry * diry);
dirx = dirx / dist;
diry = diry / dist;
this.x += dirx * 5;
this.y += diry * 5;
Since my player is moving the player.x& player.y coords in dirX & dirY will change, meaning bullet wont go to original coords.
So I would be pleased for some help.

You could use vectors to determine the trajectory of the bullets.
In the example below, when I fire a bullet:
Initialize the position at the source of the bullet
The speed is determined by:
Subtracting the mouse position from the source
Normalizing the distance
Applying a speed constant
class Bullet {
constructor(source, target, created) {
this.position = source.clone();
this.speed = this.position.clone()
.subtract(Victor.fromObject(target))
.normalize()
.multiply(new Victor(-2, -2));
this.size = 3;
this.timeLeft = created + 500;
}
update() {
this.position = this.position.add(this.speed);
}
draw(ctx) {
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.arc(this.position.x, this.position.y, this.size / 2, 0, 2 * Math.PI);
ctx.fill();
}
}
Note: I also added a timeLeft variable to remove the bullet from the game after a set period of time e.g. 500ms.
Demo
Here is an example using the vector logic explained above.
Controls
W (Up) - Move up
A (Left) - Move left
S (Down) - Move down
D (Right) - Move right
Mouse 1 - Hold to fire
const VK_W = 87;
const VK_A = 65;
const VK_S = 83;
const VK_D = 68;
const VK_UP = 38;
const VK_DOWN = 40;
const VK_LEFT = 37;
const VK_RIGHT = 39;
const canvas = document.querySelector('.game'),
stateBtn = document.querySelector('.state-btn');
let game;
const main = () => {
stateBtn.addEventListener('click', changeState);
const ctx = canvas.getContext('2d');
game = new Game(ctx, { width: 400, height: 300 });
game.run();
};
const changeState = (e) => {
const btn = e.currentTarget, running = btn.dataset.running === 'true';
if (running) {
game.pause();
} else {
game.run();
}
btn.textContent = running ? 'Pause' : 'Resume';
btn.dataset.running = !running;
};
class Game {
constructor(ctx, options) {
const { width, height } = options;
this.lastRender = 0;
this.ctx = ctx;
this.state = { keySet: new Set() };
this.bullets = [];
Object.assign(ctx.canvas, { width, height });
const origin = new Victor(width / 2, height / 2);
this.player = new Player({
name: 'Bob',
position: origin
});
ctx.canvas.addEventListener('mousemove', (e) => this.followMouse(e));
ctx.canvas.addEventListener('mousedown', (e) => this.mouseDown(e));
ctx.canvas.addEventListener('mouseup', (e) => this.mouseUp(e));
document.addEventListener('keydown', (e) => this.addKey(e), false);
document.addEventListener('keyup', (e) => this.removeKey(e), false);
}
followMouse(e) {
this.state.mousePos = getMousePos(e.currentTarget, e);
}
mouseDown(e) {
this.state.mouseDown = true;
}
mouseUp(e) {
this.state.mouseDown = false;
}
addKey(e) {
const key = e.which || e.keyCode || 0;
this.state.keySet.add(key);
}
removeKey(e) {
const key = e.which || e.keyCode || 0;
this.state.keySet.delete(key);
}
update(progress) {
const ks = this.state.keySet;
const x = (ks.has(VK_D) || ks.has(VK_RIGHT))
? 1 : (ks.has(VK_A) || ks.has(VK_LEFT)) ? -1 : 0;
const y = (ks.has(VK_S) || ks.has(VK_DOWN))
? 1 : (ks.has(VK_W) || ks.has(VK_UP)) ? -1 : 0;
this.player.position.add(new Victor(x, y));
this.bullets.forEach((bullet, index) => {
if (this.lastRender > bullet.timeLeft) {
this.bullets.splice(index, 1);
}
bullet.update(this.lastRender);
});
if (this.state.mousePos && this.state.mouseDown) {
this.bullets.push(new Bullet(this.player.position,
this.state.mousePos, this.lastRender));
}
}
draw() {
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
this.player.draw(this.ctx);
this.bullets.forEach(bullet => bullet.draw(this.ctx));
}
run(timestamp) {
const progress = timestamp - this.lastRender;
this.update(progress);
this.draw();
this.lastRender = timestamp;
this.req = window.requestAnimationFrame((t) => this.run(t));
}
pause() {
const { width, height } = this.ctx.canvas;
this.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
this.ctx.fillRect(0, 0, width, height);
this.ctx.font = '32px Arial';
this.ctx.fillStyle = '#FFF';
this.ctx.textAlign = 'center';
this.ctx.textBaseline = 'middle';
this.ctx.fillText('Paused', width / 2, height / 2);
cancelAnimationFrame(this.req);
this.req = null;
}
isRunning() {
return this.req !== null;
}
}
class Player {
constructor(options) {
const opts = { ...Player.defaultOptions, ...options };
this.name = opts.name;
this.position = opts.position;
this.size = opts.size;
}
draw(ctx) {
ctx.fillStyle = '#00FF00';
ctx.fillRect(this.position.x - this.size / 2,
this.position.y - this.size / 2, this.size, this.size);
}
};
Player.defaultOptions = {
size: 10,
position: new Victor(0, 0)
};
class Bullet {
constructor(source, target, created) {
this.position = source.clone();
this.speed = this.position.clone()
.subtract(Victor.fromObject(target))
.normalize()
.multiply(new Victor(-2, -2));
this.size = 3;
this.timeLeft = created + 500;
}
update() {
this.position = this.position.add(this.speed);
}
draw(ctx) {
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.arc(this.position.x, this.position.y, this.size / 2, 0, 2 * Math.PI);
ctx.fill();
}
}
const getMousePos = (canvas, event) =>
(({ top, left }) => ({
x: event.clientX - left,
y: event.clientY - top
}))(canvas.getBoundingClientRect());
main();
.game {
background: #111;
}
.as-console-wrapper { max-height: 4em !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/victor/1.1.0/victor.min.js"></script>
<canvas class="game"></canvas>
<div class="controls">
<button class="state-btn" data-running="true">Pause</button>
</div>

Canvas is not drawing images

I have problem with canvas, I'm trying to draw images but is not working as you can see I'm loading images into array and wait for all is loaded after this I'm changing my images each iteration but is not drawing any one, please look at my code. I cannot find error :(
(() => {
"use strict";
const images = [];
const promises = [];
const url = './assets/';
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const FPS = 30;
const INTERVAL = 10000 / FPS;
const canvasDraw = () => {
let i = 0;
setInterval(() => {
context.drawImage(images[i] , 300, 300);
i++;
if (i === images.length) i = 0;
}, INTERVAL);
};
const loadImage = (image) => {
return new Promise((resolve) => {
const img = new Image();
img.src = url + image + '.png';
img.onload = function () {
images.push(img);
resolve();
};
});
};
for(let i = 1; i < 14; i++) {
promises.push(loadImage(i));
}
Promise
.all(promises)
.then(() => {
canvasDraw();
});
})();
and my html file contains canvas like this one
<canvas id="canvas"></canvas>

You need to give your canvas a width and height.
Using placeholder images:
(() => {
"use strict";
const images = [];
const promises = [];
const url = './assets/';
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const FPS = 30;
const INTERVAL = 10000 / FPS;
const canvasDraw = () => {
let i = 0;
setInterval(() => {
context.drawImage(images[i] , 0, 0);
i++;
if (i === images.length) i = 0;
}, INTERVAL);
};
const loadImage = (image) => {
return new Promise((resolve) => {
const img = new Image();
img.src = 'https://placehold.it/' + (image * 20) + 'x' + (image * 20);
img.onload = function () {
images.push(img);
resolve();
};
});
};
for(let i = 1; i < 14; i++) {
promises.push(loadImage(i));
}
Promise
.all(promises)
.then(() => {
canvasDraw();
});
})();
<canvas id="canvas" width="300" height="300"></canvas>
Depending on what you're doing, you may want to clear the canvas between renderings.
(() => {
"use strict";
const images = [];
const promises = [];
const url = './assets/';
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const FPS = 30;
const INTERVAL = 10000 / FPS;
const canvasDraw = () => {
let i = 0;
setInterval(() => {
context.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
context.drawImage(images[i] , 0, 0);
i++;
if (i === images.length) i = 0;
}, INTERVAL);
};
const loadImage = (image) => {
return new Promise((resolve) => {
const img = new Image();
img.src = 'https://placehold.it/' + (image * 20) + 'x' + (image * 20);
img.onload = function () {
images.push(img);
resolve();
};
});
};
for(let i = 1; i < 14; i++) {
promises.push(loadImage(i));
}
Promise
.all(promises)
.then(() => {
canvasDraw();
});
})();
<canvas id="canvas" width="300" height="300"></canvas>

JavaScript canvas element doesn't display after canvas clear

I have start develop small JavaScript game with canvas.
So i need to display multiple cards in the canvas.
But i seems, after i use gameArea.clear(); method within updateGameArea() function one card isn't display. But without using that gameArea.clear(); method those cards are displaying well. But i need multiple cards.
Here my JavaScript code
var cards = [];
var selectedCards = [];
var select = true;
window.addEventListener('DOMContentLoaded', function () {
startGame();
});
function startGame() {
cards.push(new PlayingCard("blue", 5, 150, 10));
cards.push(new PlayingCard("red", 1, 10, 10));
gameArea.click();
gameArea.start();
}
var gameArea = {
canvas: document.createElement("canvas"),
start: function () {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 100);
},
click: function () {
this.canvas.addEventListener('click', getPosition);
},
clear: function () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
};
function getPosition(e) {
var top = this.offsetTop;
var left = this.offsetLeft;
var x = e.pageX - left;
var y = e.pageY - top;
cards.forEach(function (card) {
if (y > card.y && y < card.y + card.height && x > card.x && x < card.x + card.width) {
card.selected = select;
if (selectedCards.length < 2) {
selectedCards.push(card);
} else {
selectedCards = [];
selectedCards.push(card);
}
if (selectedCards.length === 2) {
selectedCards.forEach(function (selected_card) {
selected_card.x = 400;
if (selected_card.selected === select) {
console.log(selected_card);
}
});
}
}
});
}
function PlayingCard(color, value, x, y) {
this.color = function () {
if (color === 'red') {
return "#E53935";
} else if (color === 'blue') {
return "#0D47A1";
} else {
throw new Error("No Color Code Found!");
}
};
this.value = value;
this.width = 120;
this.height = 160;
this.x = x;
this.y = y;
this.selected = false;
this.update = function () {
var ctx = gameArea.context;
ctx.fillStyle = this.color();
ctx.shadowBlur = 8;
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(this.x, this.y, this.width, this.height);
};
}
function updateGameArea() {
cards.forEach(function (card) {
gameArea.clear();
card.update();
});
}

You are calling gameAera.clear() each time you draw a card. So this is why only the last card is displayed.
function updateGameArea() {
gameArea.clear(); // Move the gameArea.clear(); here
cards.forEach(function (card) {
card.update();
});
}