0 to 0,-70 by this :
ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.rotate(Math.PI/-10;);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-70);
ctx.stroke();
And I can rotate that by 'PI/-10', and that works.
How i can get the x,y points of this after using rotate?
Your x and y points will still be 0 and -70 as they are relative to the translation (rotation). It basically means you would need to "reverse engineer" the matrix to get the resulting position you see on the canvas.
If you want to calculate a line which goes 70 pixels at -10 degrees you can use simple trigonometry to calculate it yourself instead (which is easier than going sort of backwards in the matrix).
You can use a function like this that takes your context, the start position of the line (x, y) the length (in pixels) and angle (in degrees) of the line you want to draw. It draw the line and returns an object with x and y for the end point of that line:
function lineToAngle(ctx, x1, y1, length, angle) {
angle *= Math.PI / 180;
var x2 = x1 + length * Math.cos(angle),
y2 = y1 + length * Math.sin(angle);
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
return {x: x2, y: y2};
}
Then just call it as:
var pos = lineToAngle(ctx, 0, 0, 70, -10);
//show result of end point
console.log('x:', pos.x.toFixed(2), 'y:', pos.y.toFixed(2));
Result:
x: 68.94 y: -12.16
Or you can instead extend the canvas' context by doing this:
if (typeof CanvasRenderingContext2D !== 'undefined') {
CanvasRenderingContext2D.prototype.lineToAngle =
function(x1, y1, length, angle) {
angle *= Math.PI / 180;
var x2 = x1 + length * Math.cos(angle),
y2 = y1 + length * Math.sin(angle);
this.moveTo(x1, y1);
this.lineTo(x2, y2);
return {x: x2, y: y2};
}
}
And then use it directly on your context like this:
var pos = ctx.lineToAngle(100, 100, 70, -10);
ctx.stroke(); //we stroke separately to allow this being used in a path
console.log('x:', pos.x.toFixed(2), 'y:', pos.y.toFixed(2));
(0 degrees will point to the right).
So you're asking "after I set a transform, how can I run points through that transform"?
In that case, see HTML5 Canvas get transform matrix? . The question and answers are somewhat old, but seem up-to-date. I can't find anything in the current HTML5 spec that lets you access and use the transform matrix. (I see that it's theoretically accessable through context.currentTransform, but I don't see any functionality to let you use the matrix - you'd have to multiply your point through the matrix yourself, or fake it by creating a full SVGMatrix for your point vector.)
The top answer shows a transform class you can use. Track your changes through that, and use their transformPoint function to get the point you want transformed to its endpoint.
Related
As you can see in the demo the L shape is getting cropped off the top of the screen and should be rotated 180 degrees and flush with the top left corner. I noticed two things that don't work as expected, the first is when I change ctx.translate(x, y) to ctx.moveTo(x, y) and increase the shape position to 100, 100 it moves more than 100px with translate, where as moveTo seems accurate. The second is that using a negative translate after ctx.stroke() has no affect on the shapes position.
var shape = {};
function draw(shape) {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
var x = shape.position.x + 0.5;
var y = shape.position.y + 0.5;
ctx.translate(x, y);
ctx.translate(shape.width * shape.scale/2, shape.height * shape.scale/2);
ctx.rotate(shape.orientation * Math.PI/180);
ctx.beginPath();
for (var i = 0; i < shape.points.length; i++) {
x = shape.points[i].x * shape.scale + shape.position.x + 0.5;
y = shape.points[i].y * shape.scale + shape.position.y + 0.5;
ctx.lineTo(x, y);
}
ctx.strokeStyle = '#fff';
ctx.stroke();
ctx.translate(-shape.width * shape.scale/2, -shape.height * shape.scale/2);
ctx.restore();
}
}
// L Shape
shape.points = [];
shape.points.push({ x:0, y:0 });
shape.points.push({ x:0, y:3 });
shape.points.push({ x:2, y:3 });
shape.points.push({ x:2, y:2 });
shape.points.push({ x:1, y:2 });
shape.points.push({ x:1, y:0 });
shape.points.push({ x:0, y:0 });
shape.position = {x: 0, y: 0};
shape.scale = 30;
shape.width = 3;
shape.height = 2;
shape.orientation = 180;
draw(shape);
#canvas {
background: #272B34; }
<canvas id="canvas" width="400" height="600"></canvas>
The easiest way to do 2D tranforms is via the setTransform function which takes 6 numbers, 2 vectors representing the direction and scale of the X and y axis, and one coordinate representing the new origin.
Unlike the other transform functions which are dependent of the current state setTransform is not effected by any transform done before it is called.
To set the transform for a matrix that has a square aspect (x and y scale are the same) and that the y axis is at 90 deg to the x ( no skewing) and a rotation is as follows
// x,y the position of the orign
function setMatrix(x,y,scale,rotate){
var xAx = Math.cos(rotate) * scale; // the x axis x
var xAy = Math.sin(rotate) * scale; // the x axis y
ctx.setTransform(xAx, xAy, -xAy, xAx, x, y);
}
//use
setMatrix(100,100,20,Math.PI / 4);
ctx.strokeRect(-2,-2,4,4); // draw a square centered at 100,100
// scaled 20 times
// and rotate clockwise 45 deg
Update
In response to the questions in the comments.
Why sin and cos?
Can you also explain why you used cos and sin for the axis?
I use Math.sin and Math.cos to calculate the X axis and thus the Y axis as well (because y is at 90 deg to x) because it is slightly quicker than adding the rotation as a separate transform.
When you use any of the transform functions apart from setTransform you are doing a matrix multiplication. The next snippet is the JS equivalent minimum calculations done when using ctx.rotate, ctx.scale, ctx.translate, or ctx.transform
// mA represent the 2D context current transform
mA = [1,0,0,1,0,0]; // default transform
// mB represents the transform to apply
mB = [0,1,-1,0,0,0]; // Rotate 90 degree clockwise
// m is the resulting matrix
m[0] = mA[0] * mB[0] + mA[2] * mB[1];
m[1] = mA[1] * mB[0] + mA[3] * mB[1];
m[2] = mA[0] * mB[2] + mA[2] * mB[3];
m[3] = mA[1] * mB[2] + mA[3] * mB[3];
m[4] = mA[0] * mB[0] + mA[2] * mB[1] + mA[4];
m[5] = mA[1] * mB[0] + mA[3] * mB[1] + mA[5];
As you can see there are 12 multiplications and 6 additions plus the need for memory to hold the intermediate values and if the call was to ctx.rotation the sin and cos of the angle would also be done. This is all done in native code in the JavaScript engine so is quicker than doing in JS, but side stepping the matrix multiplication by calculating the axis in JavaScript results in less work. Using setTransform simply replaces the current matrix and does not require a matrix multiplication to be performed.
The alternative to the answer's setMatrix function can be
function setMatrix(x,y,scale,rotate){
ctx.setTransform(scale,0,0,scale, x, y); // set current matrix
ctx.rotate(rotate); // multiply current matrix with rotation matrix
}
which does the same and does look cleaner, though is slower and when you want to do things like games where performance is very important often called functions should be as quick as possible.
To use the setMatrix function
So how would I use this for custom shapes like the L in my demo?
Replacing your draw function. BTW you should be getting the context outside any draw function.
// assumes ctx is the 2D context in scope for this function.
function draw(shape) {
var i = 0;
setMatrix(shape.position.x, shape.position.y, shape.scale, shape.orientation); // orientation is in radians
ctx.strokeStyle = '#fff';
ctx.beginPath();
ctx.moveTo(shape.points[i].x, shape.points[i++].y)
while (i < shape.points.length) {
ctx.lineTo(shape.points[i].x, shape.points[i++].y);
}
ctx.closePath(); // draw line from end to start
ctx.stroke();
}
In your code you have the line stored such that its origin (0,0) is at the top left. When defining shapes you should define it in terms of its local coordinates. This will define the point of rotation and scaling and represents the coordinate that will be at the transforms origin (position x,y).
Thus you should define your shape at its origin
function createShape(originX, originY, points){
var i;
const shape = [];
for(i = 0; i < points.length; i++){
shape.push({
x : points[i][0] - originX,
y : points[i][1] - originY,
});
}
return shape;
}
const shape = {};
shape.points = createShape(
1,1.5, // the local origin relative to the coords on next line
[[0,0],[0,3],[2,3],[2,2],[1,2],[1,0]] // shape coords
);
I'm trying to use a gradient to fill an area of a canvas, but I would like to be able to set the angle of the gradient.
I know this is possible by using different values in the creation of the gradient (ctx.createLinearGradient(x1, y1, x2, y2)) as seen here:
But I can't seem to get my head around the maths needed to convert an angle (radians) to a gradient size that will produce the same angle (The angle I'm referring to is perpendicular to the direction of the gradient, so a 0 radian angle would show the gradient on the right)
In short, how can I convert (quantity) of radians into an X by Y shape?
$(document).ready(function(){
var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");
var angle = 0.5;
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 100, 0, -angle, true);
ctx.lineTo(100, 100);
ctx.closePath();
// Convert angle into coordinates to tilt the grad
// grad should be perpendicular to the top edge of the arc
var grad = ctx.createLinearGradient(0, 0, 0, 100);
grad.addColorStop(0, "rgba(0,0,0,0)");
grad.addColorStop(1, "rgba(0,0,0,0.8)");
ctx.fillStyle = grad;
ctx.fill();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="test" width="500" height="500"></canvas>
(So no one wastes their time: I specifically don't want to use a context.rotate() in this case)
You can use the angle with cos and sin to define the line that gives the gradient. The only thing left then is to give the length:
var length = 100, angle = 0;
ctx.createLinearGradient(x, y, x + Math.cos(angle) * length, y + Math.sin(angle) * length);
The gradient will be rendered along (perpendicular) to the line given.
Not stated, but if you need to calculate the length of the line depending on the angle and box you can use the law of sines to do so (used in this way). The example below uses a fixed radius. You can also use max length from (x1, x2) by calculating the hypotenuse: length = Math.sqrt(diffX*diffX + diffY*diffY);.
Example
var ctx = c.getContext("2d"),
x1 = 150, y1 = 150, x2, y2, angle,
length = 150;
render();
cAngle.oninput = render;
function render() {
angle = +cAngle.value / 180 * Math.PI;
// calculate gradient line based on angle
x2 = x1 + Math.cos(angle) * length;
y2 = y1 + Math.sin(angle) * length;
// create and render gradient
ctx.fillStyle = ctx.createLinearGradient(x1, y1, x2, y2);
ctx.fillStyle.addColorStop(0, "#fff");
ctx.fillStyle.addColorStop(1, "#07f");
ctx.fillRect(0, 0, 300, 300);
// show definition line
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
<label>Angle: <input id=cAngle max=359 type=range value=0></label><br>
<canvas id=c height=300></canvas>
I am looking for a way to draw multiple rectangles around a circle at an angle facing the centre. What i have so far, currently just drawing the rectangles around a circle facing one direction lacking the angle inclination towards the centre -
https://thysultan.com/projects/thyplayer/
What i want is for the rectangles to incline at an angle such that each rectangle is facing the centre of the circle at it's designated position.
How would one do that?
Trigonometry approach
To animate the lines towards the center you can use either transforms or trigonometry math. Personally I find it easier with math in cases like this so here is such an example.
See #markE's answer for an example on how to use transforms (transforms can be easier on the eye and in the code in general).
Some prerequisites:
We know canvas is oriented so that a 0° angle points towards right. This is essential if you want to mark the frequency range somehow.
We need to calculate the length of the line from outer radius towards center (inner radius)
We need to calculate the end points of the line based on the angle.
An easy solution can be to make a function that calculates a single line at a center (cx, cy) at a certain angle (in radians), with t as length, t being in the range [0, 1] (as the FFT floating point buffer bins). We also provide an outer and inner radius to enable limiting the line:
function getLine(cx, cy, angle, t, oRadius, iRadius) {
var radiusDiff = oRadius - iRadius, // calc radius diff to get max length
length = radiusDiff * t; // now we have the line length
return {
x1: oRadius * Math.cos(angle), // x1 point (outer)
y1: oRadius * Math.sin(angle), // y1 point (outer)
x2: (oRadius - length) * Math.cos(angle), // x2 point (inner)
y2: (oRadius - length) * Math.sin(angle) // y2 point (inner)
}
}
All we need to do now is to feed it data from the FFT analyzer.
NB: Since all lines points towards center, you will have a crowded center area. Something to have in mind when determine the line widths and inner radius as well as number of bins to use.
Example demo
For the example I will just use some random data for the "FFT" and plot 64 bins.
// angle - in radians
function getLine(cx, cy, angle, t, oRadius, iRadius) {
var radiusDiff = oRadius - iRadius, // calc radius diff to get max length
length = radiusDiff * t; // now we have the line length
return {
x1: cx + oRadius * Math.cos(angle), // x1 point (outer)
y1: cy + oRadius * Math.sin(angle), // y1 point (outer)
x2: cx + (oRadius - length) * Math.cos(angle), // x2 point (inner)
y2: cy + (oRadius - length) * Math.sin(angle) // y2 point (inner)
}
}
// calculate number of steps based on bins
var ctx = document.querySelector("canvas").getContext("2d"),
fftLength = 64,
angleStep = Math.PI * 2 / fftLength,
angle = 0,
line;
ctx.beginPath(); // not needed in demo, but when animated
while(angle < Math.PI*2) {
// our line function in action:
line = getLine(250, 250, angle, getFFT(), 240, 50);
ctx.moveTo(line.x1, line.y1); // add line to path
ctx.lineTo(line.x2, line.y2);
angle += angleStep // get next angle
}
ctx.lineWidth = 5; // beware of center area
ctx.stroke(); // stroke all lines at once
// to smooth the "FFT" random data
function getFFT() {return Math.random() * 0.16 + 0.4}
<canvas width=500 height=500></canvas>
I'm trying to draw speech buble with dragable handler.
That's what I have:
(x,y) - coordinates of the lowest left corner of buble
length of the buble
width of the buble
(x1,y1) coorinates of the handler end
Here is the picture for better understanding:
I know how to draw it in canvas when all coordinates are known. It's pretty simple.
Tutorial
function drawBubble(ctx, x, y, w, h, radius)
{
var r = x + w;
var b = y + h;
ctx.beginPath();
ctx.strokeStyle="black";
ctx.lineWidth="2";
ctx.moveTo(x+radius, y);
ctx.lineTo(x+radius/2, y-10);
ctx.lineTo(x+radius * 2, y);
ctx.lineTo(r-radius, y);
ctx.quadraticCurveTo(r, y, r, y+radius);
ctx.lineTo(r, y+h-radius);
ctx.quadraticCurveTo(r, b, r-radius, b);
ctx.lineTo(x+radius, b);
ctx.quadraticCurveTo(x, b, x, b-radius);
ctx.lineTo(x, y+radius);
ctx.quadraticCurveTo(x, y, x+radius, y);
ctx.stroke();
}
Example in jsFiddle
But the trouble is - how to find coordinates of red dots shown on the picture. Both (x,y) and (x1,y1) are known but change when user drags buble or handler. And in all cases handler should look pretty.
Whould be great if anyone could share the code, it's kinda complicated for me.
Thanks in advance!
You can preserve the corners and draw the pointing bit fixed to a given point. You just need to calculate the correct connection points.
// This is an example with the connection points 20px apart.
// The px and py variables here come from the onmousemove event.
// Finally, this part here is only for the top part of the bubble,
// you have watch for 4 different scenarios, depending on where
// the mouse is and thus what the pointing bit should aim for.
...
var con1 = Math.min(Math.max(x+radius,px-10),r-radius-20);
var con2 = Math.min(Math.max(x+radius+20,px+10),r-radius);
...
if(py < y) dir = 2;
...
ctx.moveTo(x+radius,y);
if(dir==2){
ctx.lineTo(con1,y);
ctx.lineTo(px,py);
ctx.lineTo(con2,y);
ctx.lineTo(r-radius,y);
}
else ctx.lineTo(r-radius,y);
ctx.quadraticCurveTo(r,y,r,y+radius);
...
Like this:
Draggable Bubble
Try clicking on the bubble to drag the pointer.
The handle is already calculated for you so it's simply a matter of preserving its coordinates by doing for example this modification:
function drawBubble(ctx, x, y, w, h, radius) {
...snipped...
var handle = {
x1: x + radius,
y1: y,
x2: x + radius / 2,
y2: y - 10,
x3: x + radius * 2,
y3: y
}
ctx.moveTo(handle.x1, handle.y1);
ctx.lineTo(handle.x2, handle.y2);
ctx.lineTo(handle.x3, handle.y3);
...snipped...
return handle;
}
Modified fiddle here
This is one way to get the coordinates for the handle.
To take it one step further we can modify the above function to also take a handle parameter.
This way you can choose to feed a handle setting or use a default calculated one:
function drawBubble(ctx, x, y, w, h, radius, handle) {
...snipped...
/// use given handle settings or calculate a default one:
handle = handle || {
x1: x + radius,
y1: y,
x2: x + radius / 2,
y2: y - 10,
x3: x + radius * 2,
y3: y
}
ctx.moveTo(handle.x1, handle.y1);
ctx.lineTo(handle.x2, handle.y2);
ctx.lineTo(handle.x3, handle.y3);
...snipped...
return handle;
}
In order to use this you first obtain a default calculate handle by passing in for example null or false to the function.
Then use those coordinates to draw the positions around. For each move clear and redraw the canvas but this time feed the modified handle parameters to the function:
/// first time:
var handle = null, /// first time use default handle
...;
handle = drawBubble(ctx, x, y, w, h, radius, handle);
Then in your mouse operations:
/// modify and update bubble:
handle = drawBubble(ctx, x, y, w, h, radius, handle);
Hope this helps!
I'd like to create a circle ctx.arc(10, 10, 15, 0, Math.PI*2, true); and hence make it flow downwards without losing its traces..
You can see this clearly in the below image -
Here as we can see on the dark side...the circle is actually moving as time passes.. I want to control the speed by entering the time...like from top to bottom it should reach in 2 seconds (or some other way to control its speed of flow)
EDIT: Sorry for some buddies the question is: whats the most efficient and "NON-memory-hogging" method to do this, (I know there is this loop method but its very memory hogging method)
Javascript knows setTimeout(fn, ms), which is going to call the given function after the given number of milliseconds. However, the browser will need some time to render your drawings, and when you want the 2 seconds to be exakt you will have to watch about your frames/seconds rate.
Theres also a new specification draft called requestAnimationFrame, see http://paulirish.com/2011/requestanimationframe-for-smart-animating/ for that.
You can draw the top semicircle, a rectangle, and the bottom semicircle. You can calculate how much it should be moved down at a particular moment in time with:
(Date.now() - startTime) / t * (y2 - y1)
where t is the time it should take for the complete movement.
http://jsfiddle.net/eGjak/231/.
var ctx = $('#cv').get(0).getContext('2d');
var y1 = 100, // start y
y2 = 300, // end y
x = 200, // x
r = 50, // radius
t = 2000; // time
var dy = y2 - y1, // difference in y
pi = Math.PI,
startTime = Date.now();
var f = function() {
var y = y1 + (Date.now() - startTime) / t * dy;
ctx.beginPath();
ctx.arc(x, y1, r, pi, 0); // top semicircle
ctx.rect(x - r, y1, r * 2, y - y1); // rectangle
ctx.arc(x, y, r, 0, -pi); // bottom semicircle
ctx.fill();
if(y < y2) { // if should be moved further
webkitRequestAnimationFrame(f);
}
};
f();