We Keep Coding

Rotate a line in 3rd dimension on HTML5 canvas

I can easily draw/rotate a line of given length around z-axis, y-axis or x-axis.
const ctx = document.getElementById("drawing").getContext("2d");
ctx.scale(1, -1); ctx.translate(0, -ctx.canvas.height); // flip canvas
const length = 50;
let t = 0;
//x = r sin(q) cos(f)
//y = r sin(q) sin(f)
//z = r cos(q)
function rotate_around_zaxis() {
const x1=50; const y1=50;
const line_angle = 20 * Math.PI/180;
const angle = 0;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1 + length * Math.sin(line_angle) * Math.cos(angle + t),
y1 + length * Math.sin(line_angle) * Math.sin(angle + t));
ctx.stroke();
}
function rotate_around_yaxis() {
const x1=150; const y1=50;
const line_angle = 20 * Math.PI/180;
const angle = 0;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1 + length * Math.sin(line_angle) * Math.cos(angle + t),
y1 + length /*Math.sin(angle + t)*/ * Math.cos(line_angle) );
ctx.stroke();
}
function rotate_around_xaxis() {
const x1=250; const y1=50;
const line_angle = 20 * Math.PI/180;
const angle = 0;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1 + length /**Math.sin(angle + t)*/ * Math.cos(line_angle),
y1 + length * Math.sin(line_angle) * Math.sin(angle + t));
ctx.stroke();
}
function line(x1, y1, x2, y2) {
ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
}
function animate() {
ctx.clearRect(0,0,300,100);
line(0, 50, 100, 50);line(50, 0, 50, 100);rotate_around_zaxis();
line(105, 50, 200, 50);line(150, 0, 150, 100);rotate_around_yaxis();
line(205, 50, 300, 50);line(250, 0, 250, 100);rotate_around_xaxis();
t+=Math.PI/180;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
<canvas id="drawing" width=300 height=100></canvas>
However I can only do this around straight up/down y-axis degree or straight x-axis. I can not figure out rotation around an arbitrary line in space. In other words I don't know how to move it to any point in 3d space between x,y and z/.
I couldn't grasp rotation matrices. Rotation calculation on many places is given like this.
x' = x * cos(angle) - y * sin(angle);
y' = x * sin(angle) + y * cos(angle);
I don't understand where this equation fits in what I am trying to do.
I want to be able to rotate the line in cone like shape around any axis. How do I achieve this?

Well, theoretically, if the first example works, then to get the second one, you can apply the first one, and then just translate everything -60°
let newX2 = Math.cos(-60 / Math.PI/180) * x2
let newY2 = Math.sin(-60 / Math.PI/180) * y2
same for x1 and y1

Fabric JS how to set border radius on bounding box of selected objects

Is it possible to change the border radius of a bounding box of a selected item? I have read through the documentation of the possible attributes that can be attributed to an object and haven't found anything that specifies the changing of the border radius of an object's bounding box. Is there perhaps an solution through CSS this can be done?

Here's a drop-in replacement for the fabric.Object.prototype.drawBorders method that handles the drawing of selection borders. I've extended it to use the property selectionRadius to determine the amount of border radius to use in the selection box.
var canvas = new fabric.Canvas("canvas");
canvas.add(new fabric.Rect({
width: 150,
height: 100,
left: 25,
top: 25,
fill: 'lightgreen',
strokeWidth: 0,
padding: 20,
selectionRadius: 20,
borderColor: 'red'
}));
fabric.Object.prototype.drawBorders = function(ctx, styleOverride) {
styleOverride = styleOverride || {};
var wh = this._calculateCurrentDimensions(),
strokeWidth = this.borderScaleFactor,
width = wh.x + strokeWidth,
height = wh.y + strokeWidth,
hasControls = typeof styleOverride.hasControls !== 'undefined' ?
styleOverride.hasControls : this.hasControls,
shouldStroke = false;
ctx.save();
ctx.strokeStyle = styleOverride.borderColor || this.borderColor;
this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray, null);
//start custom draw method with rounded corners
var rx = this.selectionRadius ? Math.min(this.selectionRadius, width / 2) : 0,
ry = this.selectionRadius ? Math.min(this.selectionRadius, height / 2) : 0,
w = width,
h = height,
x = -width / 2,
y = -height / 2,
isRounded = rx !== 0 || ry !== 0,
/* "magic number" for bezier approximations of arcs */
k = 1 - 0.5522847498;
ctx.beginPath();
ctx.moveTo(x + rx, y);
ctx.lineTo(x + w - rx, y);
isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry);
ctx.lineTo(x + w, y + h - ry);
isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h);
ctx.lineTo(x + rx, y + h);
isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry);
ctx.lineTo(x, y + ry);
isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y);
ctx.closePath();
ctx.stroke();
//end custom draw method with rounded corners
if (hasControls) {
ctx.beginPath();
this.forEachControl(function(control, key, fabricObject) {
// in this moment, the ctx is centered on the object.
// width and height of the above function are the size of the bbox.
if (control.withConnection && control.getVisibility(fabricObject, key)) {
// reset movement for each control
shouldStroke = true;
ctx.moveTo(control.x * width, control.y * height);
ctx.lineTo(
control.x * width + control.offsetX,
control.y * height + control.offsetY
);
}
});
if (shouldStroke) {
ctx.stroke();
}
}
ctx.restore();
return this;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
<canvas id="canvas" height="300" width="400"></canvas>

Canvas quadraticCurveTo

I spotted this piece of code that generates a rectangle with rounded corners but I would like to be able to increase the size (height and width) of the rectangle as I want.
var canvas = document.getElementById('newCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 10);
ctx.lineTo(80, 10);
ctx.quadraticCurveTo(90, 10, 90, 20);
ctx.lineTo(90, 80);
ctx.quadraticCurveTo(90, 90, 80, 90);
ctx.lineTo(20, 90);
ctx.quadraticCurveTo(10, 90, 10, 80);
ctx.lineTo(10, 20);
ctx.quadraticCurveTo(10, 10, 20, 10);
ctx.stroke();

You need to convert your static values to (x, y) coordinates and [width × height] dimension variables.
I took what you had and reverse-engineered the formulas to calculate your static drawing. Take your existing variables and change them to x or y and add the width or height to them and optionally add or subtract the radius where necessary.
const drawRoundedRect = (ctx, x, y, width, height, radius) => {
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.stroke();
};
const canvas = document.getElementById('new-canvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'black';
ctx.strokeRect(10, 10, 80, 80);
ctx.strokeStyle = 'red';
drawRoundedRect(ctx, 10, 10, 80, 80, 10);
ctx.strokeStyle = 'green';
drawRoundedRect(ctx, 20, 20, 60, 60, 14);
<canvas id="new-canvas"></canvas>

Don't forget to join path ends
I noticed that you forgot to close the path. This can result in a slight seam or bump at the start / end of the path depending on the ctx.lineJoin setting.
The call to ctx.closePath connects the end to the start with a line
Visual design
Visual design rules for the type of curves to use.
Beziers for curves that are part of things that move quickly
Circle for things that are static or move slowly
Bezier curves can never exactly fit a circle. Quadratic beziers are very bad fits. If you must use a bezier curve use a cubic bezier to get a better fit.
Best approximation of a circle using a cubic bezier is to inset control points by c = 0.55191502449 as fraction of radius. This will result in the minimum possible radial error of 0.019608%
Example shows the difference between a cubic (black) and quadratic (red) curves.
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
drawRoundedRectQuad(ctx, 10, 10, 180, 180, 70);
ctx.strokeStyle = 'black';
drawRoundedRect(ctx, 10, 10, 180, 180, 70);
function drawRoundedRect(ctx, x, y, w, h, r) {
const c = 0.55191502449;
const cP = r * (1 - c);
const right = x + w;
const bottom = y + h;
ctx.beginPath();
ctx.lineTo(right - r, y);
ctx.bezierCurveTo(right - cP, y, right, y + cP, right, y + r);
ctx.lineTo(right, bottom - r);
ctx.bezierCurveTo(right, bottom - cP, right - cP, bottom, right - r, bottom);
ctx.lineTo(x + r, bottom);
ctx.bezierCurveTo(x + cP, bottom, x, bottom - cP, x, bottom - r);
ctx.lineTo(x, y + r);
ctx.bezierCurveTo(x, y + cP , x + cP, y, x + r, y);
ctx.closePath();
ctx.stroke();
}
function drawRoundedRectQuad(ctx, x, y, w, h, r){
ctx.beginPath();
ctx.lineTo(x + w- r, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
ctx.lineTo(x + w, y + h- r);
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
ctx.lineTo(x + r, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h- r);
ctx.lineTo(x, y + r);
ctx.quadraticCurveTo(x, y, x + r, y);
ctx.closePath();
ctx.stroke();
};
<canvas id="canvas" width ="200" height="200"></canvas>
Rounded corners to match CSS border-radius
To get a true rounded rectangle (circles rather than approx curve) use ctx.arc to create the rounded corners.
Extending the 2D API with roundedRect
The code below draws a rounded rectangle by adding the functions strokeRoundedRect(x, y, w, [h, [r]]), fillRoundedRect(x, y, w, [h, [r]]), and roundedRect(x, y, w, [h, [r]]) to the 2D context prototype.
Arguments
x, y, w, [h, [r]]
x, y Top left of rounded rectangle
w, Width of rounded rectangle
h, Optional height of rectangle. Defaults to value of width (creates rounded square)
r Optional radius or corners. Default is 0 (no rounded corners). If value is negative then a radius of 0 is used. If r > than half the width or height then r is change to Math.min(w * 0.5, h * 0.5)
Example
Including implementation of round rectangle extensions.
function Extend2DRoundedRect() {
const p90 = Math.PI * 0.5;
const p180 = Math.PI;
const p270 = Math.PI * 1.5;
const p360 = Math.PI * 2;
function roundedRect(x, y, w, h = w, r = 0) {
const ctx = this;
if (r < 0) { r = 0 }
if (r === 0) {
ctx.rect(x, y, w, h);
return;
}
r = Math.min(r, w * 0.5, h * 0.5)
ctx.moveTo(x, y + r);
ctx.arc(x + r , y + r , r, p180, p270);
ctx.arc(x + w - r, y + r , r, p270, p360);
ctx.arc(x + w - r, y + h - r, r, 0 , p90);
ctx.arc(x + r , y + h - r, r, p90 , p180);
ctx.closePath();
}
function strokeRoundedRect(...args) {
const ctx = this;
ctx.beginPath();
ctx.roundedRect(...args);
ctx.stroke();
}
function fillRoundedRect(...args) {
const ctx = this;
ctx.beginPath();
ctx.roundedRect(...args);
ctx.fill();
}
CanvasRenderingContext2D.prototype.roundedRect = roundedRect;
CanvasRenderingContext2D.prototype.strokeRoundedRect = strokeRoundedRect;
CanvasRenderingContext2D.prototype.fillRoundedRect = fillRoundedRect;
}
Extend2DRoundedRect();
// Using rounded rectangle extended 2D context
const ctx = canvas.getContext('2d');
ctx.strokeStyle = "#000";
ctx.strokeRoundedRect(10.5, 10.5, 180, 180); // no radius render rectangle
ctx.strokeRoundedRect(210.5, 10.5, 180, 180, 20); // Draw 1px line along center of pixels
ctx.strokeRoundedRect(20, 20, 160, 160, 30);
ctx.fillRoundedRect(30, 30, 140, 140, 20);
ctx.fillRoundedRect(230, 30, 140, 40, 20); // Circle ends
ctx.fillRoundedRect(230, 80, 140, 20, 20); // Auto circle ends
ctx.fillRoundedRect(280, 120, 40, 40, 120); // circle all sides
var inset = 0;
ctx.beginPath();
while (inset < 80) {
ctx.roundedRect(
10 + inset, 210 + inset,
380 - inset * 2, 180 - inset * 2,
50 - inset
);
inset += 8;
}
ctx.fill("evenodd");
<canvas id="canvas" width="400" height="400"></canvas>

How to draw flow chart document shape on canvas?

am trying to draw flow chart document shape (https://i.imgur.com/ZfWDDfs.png) on canvas i have partially done it but have hard time with the lower curve as it shows ok it one position but when i change x y coordinates the curve is effected so i wonder how to properly draw the curve in it so that it remain same after coordinate change.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// var x = 150, y = 150, w = 350, h = 350; // display ok
var x = 50, y = 50, w = 350, h = 350; // display not ok
ctx.lineWidth = 10;
ctx.beginPath();
ctx.lineJoin="round";
// draw one horizontal and two vertical lines
ctx.moveTo(x, y);
ctx.lineTo((x + w)+(w/4), y);
ctx.lineTo((x + w)+(w/4) , y + h/1.3);
ctx.moveTo(x, y);
ctx.lineTo(x, y + h);
// bottom curve .. problem start here
ctx.quadraticCurveTo(x,h + (h/1.2), (x + w/2) ,h + h/4);
ctx.lineTo((x + w)+(w/4), y+h/1.3);
ctx.stroke();
This code using x = 50 and y = 50 :
let drawChart = function(ctx, points) {
ctx.moveTo((points[0].x), points[0].y);
for (var i = 0; i < points.length - 1; i++) {
// Draw point
// ctx.arc(points[i].x, points[i].y, 2, 0, Math.PI * 2, false);
var x_mid = (points[i].x + points[i + 1].x) / 2;
var y_mid = (points[i].y + points[i + 1].y) / 2;
var cp_x1 = (x_mid + points[i].x) / 2;
var cp_y1 = (y_mid + points[i].y) / 2;
var cp_x2 = (x_mid + points[i + 1].x) / 2;
var cp_y2 = (y_mid + points[i + 1].y) / 2;
ctx.quadraticCurveTo(cp_x1, points[i].y, x_mid, y_mid);
ctx.quadraticCurveTo(cp_x2, points[i + 1].y, points[i + 1].x, points[i + 1].y);
ctx.stroke();
}
// ctx.arc(points[points.length - 1].x, points[points.length - 1].y, 2, 0, Math.PI * 2, false)
// ctx.stroke();
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//var x = 150, y = 150, w = 350, h = 350; // ok
var x = 50,
y = 50,
w = 350,
h = 350; // not ok
ctx.lineWidth = 10;
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(x, y);
ctx.lineTo((x + w) + (w / 4), y);
ctx.lineTo((x + w) + (w / 4), y + h / 1.3);
ctx.moveTo(x, y);
ctx.lineTo(x, y + h);
// var points = [{x:x,y:y + h},{x:(x + w/2),y:h + h/5},{x:(x + w)+(w/4),y:h/1.3 }]
// var points = [{x:x,y:y + h},{x:(x + w/3),y:h + h/2},{x:(x + w/1.2),y:h + h/4},{x:(x + w)+(w/4),y:h + h/5}]
//drawChart(ctx,points);
ctx.quadraticCurveTo(x, h + (h / 1.2), (x + w / 2), h + h / 4);
// ctx.quadraticCurveTo((x + w/2),h , (x + w)+(w/4) , h + h/5 );
ctx.lineTo((x + w) + (w / 4), y + h / 1.3);
// ctx.closePath();
ctx.stroke();
// ctx.fill();
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
http://jsfiddle.net/0da2e869/

You have to use :
ctx.quadraticCurveTo(x, y + h * 1.6, x + w / 2, y + h);
The first and second arg was position on your grid.
ctx.quadraticCurveTo(cpx, cpy, x, y);
NB : To improve your draw use ctx.lineCap = "round";. ;)
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
drawIt(150, 150, 350, 350); // ok
ctx.strokeStyle = "red";
drawIt(50, 50, 350, 350); // not ok
function drawIt(x, y, w, h) {
ctx.lineWidth = 10;
ctx.beginPath();
ctx.lineJoin = "round";
ctx.lineCap = "round"; //<========== lineCap
ctx.moveTo(x, y);
ctx.lineTo((x + w) + (w / 4), y);
ctx.lineTo((x + w) + (w / 4), y + h / 1.3);
ctx.moveTo(x, y);
ctx.lineTo(x, y + h);
ctx.quadraticCurveTo(x, y + h * 1.6, x + w / 2, y + h);
ctx.lineTo((x + w) + (w / 4), y + h / 1.3);
ctx.stroke();
}
canvas {
/* Focus on the "not ok" */
transform-origin: top left;
transform: scale(.25);
transition:1s;
}
body:hover canvas {
/* Focus on the "not ok" */
transform-origin: top left;
transform: none;
}
<canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;"></canvas>

animate canvas up and down based on cylinder height and variable value which i enter in the code

Animating canvas (line) up and down based on the variable value.
Here I have added variable name position. Default my line will be in bottom of the cylinder. When I enter the value as 20 it has move up and vice verca if I enter the value as 15 it has to come down like that 0 - 100. So what I tried was I created a variable inside a new function call
function animatecurve()
{
var position = 0;
alert("position " + position);
var bottomcylin = $('#canvas').position().top + $('#canvas').outerHeight(true);
alert("cylinder bottom" + bottomcylin);
if (position1 > 0) {
alert("inside position" + position1);
$('#myCanvas').animate({top:"-=10px",}, 300);
} else {
$('#myCanvas').animate({top:"0px",}, 300);
}
}
Here I have found outerheight of the cylinder. It should not go beyond the cylinder if i enter the value 30 in the position my curve has to move towards top of the cylinder.
Fiddle link
Please guide me.
Regards
M

Take a look http://jsfiddle.net/BG6p2/, maybe this is what you are looking for
HTML
<canvas id="canvas" width="300" height="500"></canvas>
<input type="text" id="level" placeholder="type value here %" />
Javascript
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
input = document.getElementById('level');
//helpers
ctx.drawEllipse = function(x, y, radius, color, colorBorder){
this.fillStyle = '#000';
this.strokeStyle = '#000';
this.save();
this.scale(2, 1);
this.beginPath();
this.arc(x, y, radius, 0, 2 * Math.PI, false);
this.restore();
this.closePath();
if(color) {
this.fillStyle = color;
this.fill();
if(colorBorder) this.strokeStyle = color;
}
this.stroke();
}
ctx.drawLine = function(startX, startY, endX, endY, color){
if(color) this.strokeStyle = color;
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke();
};
/**
* #params
* #param x - top left x coordinate
* #param y - top left y coordinate
* #param radius - ellipsis radius
* #param height - cylinder height
* #param liquidColor - inner liquid color
* #param liquidSunnySideColor - liquid surface color
* #param liquidLevel - liquid level
**/
ctx.drawCylinder = function(x, y, radius, height, liquidColor, liquidSunnySideColor,liquidLevel){
//do not spill
liquidLevel = Math.min(height, liquidLevel);
//draw liquid inner body
ctx.fillStyle = liquidColor;
ctx.fillRect(x, y + (height - liquidLevel), x + radius * 4, liquidLevel);
//console.log(x, y);
//bottom cap
ctx.drawEllipse(x, y + height, radius, liquidLevel ? liquidColor : false);
//liquid level
ctx.drawEllipse(x, y + (height - liquidLevel), radius, liquidLevel ? liquidSunnySideColor : false, true);
ctx.drawEllipse(x, y + height, radius);
//top cap
ctx.drawEllipse(x, y, radius);
//left border
ctx.drawLine(x, y, x, y + height, '#000');
//right border
ctx.drawLine(x + radius * 4, y, x + radius * 4, y + height, '#000');
}
var renderLoop = window.webkitRequestAnimationFrame,
//workers
_fps = 60,
_speed = 1,
_currentLevel = 0,
_maxLevel = 0,
_renderTime = 0,
_render,
time,
//cylinder
x = 100,
y = 100,
radius = 50,
height = 200;
_render = function(){
time = window.performance.now();
if(time - _renderTime > 1000 / _fps){
ctx.clearRect(0, 0, 300, 500);
//only positive values
_currentLevel = Math.max(0, _currentLevel);
if(_currentLevel > _maxLevel) _currentLevel -= _speed;
if(_currentLevel < _maxLevel) _currentLevel += _speed;
ctx.drawCylinder(x, y, radius, height, '#90C94D', '#BBED80', _currentLevel);
_renderTime = time;
}
renderLoop(_render);
}
_render();
input.addEventListener('blur', function(){
//only positive values
_maxLevel = Math.max(0, height * Math.min(1, this.value / 100));
});