Making mouse position (0, 0) the center of the canvas

Question

So I've recently been messing around with html5 canvas and trying to figure out how to make a particle system. While it does work I want to make vx = mouse coordinates(specifically x) but they start from the center.

What I mean by this is basically if the cursor is in the center of the canvas then vx would be equal to 0 and if the cursor is to the right from the center of the canvas it have positive mouse coordinates (and if the cursor is to the left from the center of canvas it have negative mouse coordinates).

Once that is accomplished I would just do p.speed += p.vx

Here is my javascript:

window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = window.innerWidth, H = window.innerHeight;
canvas.width = W;

canvas.height = H;
var particles = []; 
var particle_count = 100;
for(var i = 0; i < particle_count; i++)
{
    particles.push(new particle());
}
function particle()
{
this.vx = -1 + Math.random() * 2;
    this.speed = {x: 0, y: -15+Math.random()*10};
    this.location = {x: W/2, y: H/2};
    this.radius = 5+Math.random()*10;
    this.life = 20+Math.random()*10;
    this.remaining_life = this.life;

    this.r = Math.round(Math.random()*255);
    this.g = Math.round(Math.random()*55);
    this.b = Math.round(Math.random()*5);

}
function draw()
{
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, W, H);
    ctx.globalCompositeOperation = "lighter";
    for(var i = 0; i < particles.length; i++)
    {
        var p = particles[i];
        ctx.beginPath();
        p.opacity = Math.round(p.remaining_life/p.life*100)/100
        var gradient = ctx.createRadialGradient(
              p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
        gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
        gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
        gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)");
        ctx.fillStyle = gradient;

ctx.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);
        ctx.fill(); 
        p.remaining_life--;
        p.radius--;
        p.location.x += p.speed.x += p.vx;
        p.location.y += p.speed.y;
        if(p.remaining_life < 0 || p.radius < 0) {
            particles[i] = new particle();
        }
    }
}

setInterval(draw, 33); }

Here is my codepen .

Answer 1

• You need to translate context to move origin to center.
• You also need to reverse the translation on the mouse coordinates as they will still be relative to the upper-left corner (assuming the coordinates are corrected to be relative to canvas).

Example :

var cx = canvas.width * 0.5;
var cy = canvas.height * 0.5;

ctx.translate(cx, cy);            // translate globally once

For each mouse coordinate compensate with the translated position:

var pos = getMousePosition(evt);  // see below
var x = pos.x - cx;
var y = pos.y - cy;

To adjust mouse position:

function getMousePosition(evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    }
}