Canvas get perspective point

Question

i've a canvas dom element inside a div #content with transform rotateX(23deg) and #view with perspective 990px

<div id="view">
   <div id="content">
      <canvas></canvas>
   </div>
</div>

if i draw a point (300,300) inside canvas, the projected coordinates are different (350, 250).

The real problem is when an object drawn in a canvas is interactive (click o drag and drop), the hit area is translated.

Which equation i've to use? Some kind of matrix?

Thanks for your support.

Answer 1

This is something I am dealing with now. Lets start out with something simple. Let's say your canvas is right up against the top left corner. If you click the mouse and make an arc on that spot it will be good.

canvasDOMObject.onmouseclick = (e) => {
    const x = e.clientX;
    const y = e.clientY;
}

If your canvas origin is not at client origin you would need to do something like this:

const rect = canvasDOMObject.getBoundingRect();
const x = e.clientX - rect.x;
const y = e.clientY - rect.y;

If you apply some pan, adding pan, when drawing stuff you need to un-pan it, pre-subtract the pan, when capturing the mouse point:

const panX = 30;
const panY = 40;
const rect = canvasDOMObject.getBoundingRect();
const x = e.clientX - rect.x - panX;
const y = e.clientY - rect.y - panY;
...
ctx.save();
ctx.translate(panX, panY);
ctx.beginPath();
ctx.strokeArc(x, y);
ctx.restore();

If you apply, for instance, a scale when you draw it, you would need to un-scale it when capturing the mouse point:

const panX = 30;
const panY = 40;
const scale = 1.5;
const rect = canvasDOMObject.getBoundingRect();
const x = (e.clientX - rect.x - panX) / scale;
const y = (e.clientY - rect.y - panY) / scale;
...
ctx.save();
ctx.translate(panX, panY);
ctx.scale(scale);
ctx.beginPath();
ctx.strokeArc(x, y);
ctx.restore();

The rotation I have not figured out yet but I'm getting there.

Answer 2

Alternative solution.

One way to solve the problem is to trace the ray from the mouse into the page and finding the point on the canvas where that ray intercepts.

You will need to transform the x and y axis of the canvas to match its transform. You will also have to project the ray from the desired point to the perspective point. (defined by x,y,z where z is perspective CSS value)

Note: I could not find much info about CSS perspective math and how it is implemented so it is just guess work from me.

There is a lot of math involved and i had to build a quick 3dpoint object to manage it all. I will warn you that it is not well designed (I dont have the time to inline it where needed) and will incur a heavy GC toll. You should rewrite the ray intercept and remove all the point clone calls and reuse points rather than create new ones each time you need them.

There are a few short cuts. The ray / face intercept assumes that the 3 points defining the face are the actual x and y axis but it does not check that this is so. If you have the wrong axis you will not get the correct pixel coordinate. Also the returned coordinate is relative to the point face.p1 (0,0) and is in the range 0-1 where 0 <= x <= 1 and 0 <= y <= 1 are points on the canvas.

Make sure the canvas resolution matches the display size. If not you will need to scale the axis and the results to fit.

DEMO

The demo project a set of points creating a cross through the center of the canvas. You will notice the radius of the projected circle will change depending on distance from the camera.

Note code is in ES6 and requires Babel to run on legacy browsers.

 var divCont = document.createElement("div"); var canvas = document.createElement("canvas"); canvas.width = 400; canvas.height = 400; var w = canvas.width; var h = canvas.height; var cw = w / 2; // center var ch = h / 2; var ctx = canvas.getContext("2d"); // perspectiveOrigin var px = cw; // canvas center var py = 50; // // perspective var pd = 700; var mat; divCont.style.perspectiveOrigin = px + "px "+py+"px"; divCont.style.perspective = pd + "px"; divCont.style.transformStyle = "preserve-3d"; divCont.style.margin = "10px"; divCont.style.border = "1px black solid"; divCont.style.width = (canvas.width+8) + "px"; divCont.style.height = (canvas.height+8) + "px"; divCont.appendChild(canvas); document.body.appendChild(divCont); function getMatrix(){ // get canvas matrix if(mat === undefined){ mat = new DOMMatrix().setMatrixValue(canvas.style.transform); }else{ mat.setMatrixValue(canvas.style.transform); } } function getPoint(x,y){ // get point on canvas var ww = canvas.width; var hh = canvas.height; var face = createFace( createPoint(mat.transformPoint(new DOMPoint(-ww / 2, -hh / 2))), createPoint(mat.transformPoint(new DOMPoint(ww / 2, -hh / 2))), createPoint(mat.transformPoint(new DOMPoint(-ww / 2, hh / 2))) ); var ray = createRay( createPoint(x - ww / 2, y - hh / 2, 0), createPoint(px - ww / 2, py - hh / 2, pd) ); return intersectCoord3DRayFace(ray, face); } // draw point projected onto the canvas function drawPoint(x,y){ var p = getPoint(x,y); if(p !== undefined){ px *= canvas.width; py *= canvas.height; ctx.beginPath(); ctx.arc(px,py,8,0,Math.PI * 2); ctx.fill(); } } // main update function function update(timer){ ctx.setTransform(1,0,0,1,0,0); // reset transform ctx.globalAlpha = 1; // reset alpha ctx.fillStyle = "green"; ctx.fillRect(0,0,w,h); ctx.lineWidth = 10; ctx.strokeRect(0,0,w,h); canvas.style.transform = "rotateX("+timer/100+"deg)" + " rotateY("+timer/50+"deg)"; getMatrix(); ctx.fillStyle = "gold"; drawPoint(cw,ch); for(var i = -200; i <= 200; i += 40){ drawPoint(cw + i,ch); drawPoint(cw ,ch + i); } requestAnimationFrame(update); } requestAnimationFrame(update); // Math functions to find x,y pos on plain. // Warning this code is not built for SPEED and will incure a lot of GC hits const small = 1e-6; var pointFunctions = { add(p){ this.x += px; this.y += py; this.z += pz; return this; }, sub(p){ this.x -= px; this.y -= py; this.z -= pz; return this; }, mul(mag){ this.x *= mag; this.y *= mag; this.z *= mag; return this; }, mag(){ // get length return Math.hypot(this.x,this.y,this.z); }, cross(p){ var p1 = this.clone(); p1.x = this.y * pz - this.z * py; p1.y = this.z * px - this.x * pz; p1.z = this.x * py - this.y * px; return p1; }, dot(p){ return this.x * px + this.y * py + this.z * pz; }, isZero(){ return Math.abs(this.x) < small && Math.abs(this.y) < small && Math.abs(this.z) < small; }, clone(){ return Object.assign({ x : this.x, y : this.y, z : this.z, },pointFunctions); } } function createPoint(x,y,z){ if(y === undefined){ // quick add overloaded for DOMPoint y = xy; z = xz; x = xx; } return Object.assign({ x, y, z, }, pointFunctions); } function createRay(p1, p2){ return { p1, p2 }; } function createFace(p1, p2, p3){ return { p1,p2, p3 }; } // Returns the x,y coord of ray intercepting face // ray is defined by two 3D points and is infinite in length // face is 3 points on the intereceptin plane // For correct intercept point face p1-p2 should be at 90deg to p1-p3 (x, and y Axis) // returns unit coordinates x,y on the face with the origin at face.p1 // If there is no solution then returns undefined function intersectCoord3DRayFace(ray, face ){ var u = face.p2.clone().sub(face.p1); var v = face.p3.clone().sub(face.p1); var n = u.cross(v); if(n.isZero()){ return; // return undefined } var vr = ray.p2.clone().sub(ray.p1); var b = n.dot(vr); if (Math.abs(b) < small) { // ray is parallel face return; // no intercept return undefined } var w = ray.p1.clone().sub(face.p1); var a = -n.dot(w); var uDist = a / b; var intercept = ray.p1.clone().add(vr.mul(uDist)); // intersect point var uu = u.dot(u); var uv = u.dot(v); var vv = v.dot(v); var dot = uv * uv - uu * vv; w = intercept.clone().sub(face.p1); var wu = w.dot(u); var wv = w.dot(v); var x = (uv * wv - vv * wu) / dot; var y = (uv * wu - uu * wv) / dot; return {x,y}; }