I am trying to make a circular arc such that it has 2 lines and both the lines are joined together using 2 arc(connecting top and bottom of the lines respectively)
https://jsfiddle.net/AnuragSinha/94d5gy6u/1/
ctx = document.getElementById('canvas').getContext('2d');
this.max = 100;
this.min = 0;
var start = 0;
var end = 100;
this.radius=100;
ctx.beginPath();
var startAngle = 3/8*2*Math.PI + ((3/4*2*Math.PI)/(this.max - this.min) * start);
var endAngle = (3/8*2*Math.PI + ((3/4*2*Math.PI)/(this.max - this.min) * end));
var r = this.radius;
var x1 = r - (r-5)* Math.cos(Math.PI - startAngle);
var y1 = r + (r-5)* Math.sin(Math.PI - startAngle);
var x2 = r - (r - r/10)* Math.cos(Math.PI - startAngle);
var y2 = r + (r - r/10)* Math.sin(Math.PI - startAngle);
var x3 = r - (r-5)* Math.cos(Math.PI - endAngle+0.05);
var y3 = r + (r-5)* Math.sin(Math.PI - endAngle+0.05);
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.arc(this.radius, this.radius, this.radius-(this.radius/10), startAngle, endAngle-0.05);
ctx.lineTo(x3, y3);
ctx.arc(this.radius, this.radius, this.radius-(5), endAngle-0.05, startAngle, true);
ctx.lineTo(x1, y1);
ctx.lineWidth = 1;
ctx.fillStyle = '#8ED6FF';
ctx.fill;
ctx.strokeStyle='#8ED6FF';
ctx.stroke();
ctx.closePath();
Although the drawing has come up clean but I am not able to fill the color inside this shape. Found few other threads which talk about calling beginPath() and closePath() APIs but that didn't help too. Any suggestions?
you need to execute the fill method
ctx.fill();
Related
Most code to drawing arrowheads in html canvas involves rotating the canvas context and drawing the lines.
My use case is to draw them using trigonometry without rotating the canvas. or is that vector algorithm you call it? Help is appreciated.
This is what I have (forgot where I got most of the code). Draws 2 arrowheads on start and end based on the last 2 parameters arrowStart and arrowEnd which are boolean.
drawLineArrowhead: function(context, arrowStart, arrowEnd) {
// Place start end points here.
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var distanceFromLine = 6;
var arrowLength = 9;
var dx = x2 - x1;
var dy = y2 - y1;
var angle = Math.atan2(dy, dx);
var length = Math.sqrt(dx * dx + dy * dy);
context.translate(x1, y1);
context.rotate(angle);
context.beginPath();
context.moveTo(0, 0);
context.lineTo(length, 0);
if (arrowStart) {
context.moveTo(arrowLength, -distanceFromLine);
context.lineTo(0, 0);
context.lineTo(arrowLength, distanceFromLine);
}
if (arrowEnd) {
context.moveTo(length - arrowLength, -distanceFromLine);
context.lineTo(length, 0);
context.lineTo(length - arrowLength, distanceFromLine);
}
context.stroke();
context.setTransform(1, 0, 0, 1, 0, 0);
},
See the code below, just a bit of trigonometry.
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.lineCap = "round";
ctx.lineWidth = 5;
function drawLineArrowhead(p1, p2, startSize, endSize) {
ctx.beginPath()
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
if (startSize > 0) {
lineAngle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
delta = Math.PI/6
for (i=0; i<2; i++) {
ctx.moveTo(p1.x, p1.y);
x = p1.x + startSize * Math.cos(lineAngle + delta)
y = p1.y + startSize * Math.sin(lineAngle + delta)
ctx.lineTo(x, y);
delta *= -1
}
}
if (endSize > 0) {
lineAngle = Math.atan2(p1.y - p2.y, p1.x - p2.x);
delta = Math.PI/6
for (i=0; i<2; i++) {
ctx.moveTo(p2.x, p2.y);
x = p2.x + endSize * Math.cos(lineAngle + delta)
y = p2.y + endSize * Math.sin(lineAngle + delta)
ctx.lineTo(x, y);
delta *= -1
}
}
ctx.stroke();
}
drawLineArrowhead({x:10, y:10}, {x:100, y:20}, 0, 30)
drawLineArrowhead({x:20, y:25}, {x:140, y:120}, 20, 20)
drawLineArrowhead({x:140, y:20}, {x:80, y:50} , 20, 0)
drawLineArrowhead({x:150, y:20}, {x:150, y:90}, 20, 5)
drawLineArrowhead({x:180, y:90}, {x:180, y:20}, 20, 5)
drawLineArrowhead({x:200, y:10}, {x:200, y:140}, 10, 10)
drawLineArrowhead({x:220, y:140}, {x:220, y:10}, 10, 20)
<canvas id="canvas">
If you run it you should see a few samples.
The drawLineArrowhead has 4 parameters (p1, p2, startSize, endSize)
the first two are the starting-point and end-point of the line, the last two are arrow size, just to give some control to the final user over how big are those arrows at the end, if we want to remove them we set to 0.
I'm using a native HTML 5 canvas to create a text effect then attempting to create an image from the canvas or copy the canvas to a fabric.js object, but the output doesn't reflect the changes done to the text.
Fiddle: https://jsfiddle.net/rf8kdxq1/2/
Something simple I hope?
var ctx = demo.getContext('2d'),
font = '64px impact',
w = demo.width,
h = demo.height,
curve,
offsetY,
bottom,
textHeight,
isTri = false,
dltY,
angleSteps = 180 / w,
i = w,
y,
os = document.createElement('canvas'),
octx = os.getContext('2d');
os.width = w;
os.height = h;
octx.font = font;
octx.textBaseline = 'top';
octx.textAlign = 'center';
curve = parseInt(110, 10);
offsetY = parseInt(4, 10);
textHeight = parseInt(64, 10);
bottom = parseInt(200, 10);
octx.fillText('BRIDGE', w * 0.5, 0);
/// slide and dice
i = w;
dltY = curve / textHeight;
y = 0;
while (i--) {
y = bottom - curve * Math.sin(i * angleSteps * Math.PI / 180);
ctx.drawImage(os, i, 0, 1, textHeight,
i, h * 0.5 - offsetY / textHeight * y, 1, y);
}
// ctx.drawImage(os, i, 0);
dataURL = os.toDataURL();
img = new Image();
img.src = dataURL;
img.onload = function() {
console.log(img);
};
var newCanv = new fabric.Canvas('canvasd');
function xfer() {
var image = new fabric.Image(os);
setTimeout(function() {
newCanv.add(image);
},500);
}
xfer();
I am trying to draw on canvas, like drawing using pencil tool in the paint using jquery mobile.
I searched for many links and most of them were for the desktop, i tried to implement the same logic for the mobile app, i am able to obtain only the click events but not able to draw the line on the canvas.
This is what i was trying to implement on the mobile http://jsfiddle.net/loktar/dQppK/23/
This is my code
$(document).on(
'pageshow',
'#canvaspage',
function() {
var painting = false;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// ctx.fillStyle="#FF0000";
// ctx.fillRect(0,0,150,75);
// ctx.drawImage(icons-18-black.png)
ctx.canvas.width = window.innerWidth * 0.8;
ctx.canvas.height = window.innerHeight * 0.8;
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0, ctx.canvas.width * 0.8,
ctx.canvas.height * 0.7);
};
imageObj.src = 'Image.png';
// c.addEventListener('touchstart', function(e) {
$("#myCanvas").on("touchstart",function(e){
painting = true;
e.preventDefault();
ctx.fillStyle = "#FF0000";
lastX = e.pageX - this.offsetLeft;
lastY = e.pageY - this.offsetTop;
});
// c.addEventListener('touchend', function(e) {
$("#myCanvas").on("touchend",function(e){
painting = false;
});
// c.addEventListener('touchmove', function(e) {
$("#myCanvas").on("touchmove",function(e){
if (painting) {
mouseX = e.pageX - this.offsetLeft;
mouseY = e.pageY - this.offsetTop;
// find all points between
var x1 = mouseX,
x2 = lastX,
y1 = mouseY,
y2 = lastY;
var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
if (steep){
var x = x1;
x1 = y1;
y1 = x;
var y = y2;
y2 = x2;
x2 = y;
}
if (x1 > x2) {
var x = x1;
x1 = x2;
x2 = x;
var y = y1;
y1 = y2;
y2 = y;
}
var dx = x2 - x1,
dy = Math.abs(y2 - y1),
error = 0,
de = dy / dx,
yStep = -1,
y = y1;
if (y1 < y2) {
yStep = 1;
}
lineThickness = 5 - Math.sqrt((x2 - x1) *(x2-x1) + (y2 - y1) * (y2-y1))/10;
if(lineThickness < 1){
lineThickness = 1;
}
alert(painting +" " +x1 +" "+x2);
for (var x = x1; x < x2; x++) {
// alert(x +" "+ y +" "+ lineThickness);
if (steep) {
ctx.fillRect(y, x, lineThickness , lineThickness );
} else {
ctx.fillRect(x, y, lineThickness , lineThickness );
}
alert(steep);
error += de;
if (error >= 0.5) {
y += yStep;
error -= 1.0;
}
}
lastX = mouseX;
lastY = mouseY;
}
// ctx.fillRect(0, 0, 150, 75);
e.preventDefault();
}, false);
});
In the above code i am able to obtain all the touch events but the unable to draw the line.
How can i draw the lines on the canvas??..
Thanks:)
You can use sketch.js (http://intridea.github.io/sketch.js/) with a small modification to make it work on mobile. The modification is given in the comment by leonth here: https://github.com/intridea/sketch.js/issues/1; you basically add 3 lines to the plugin on the mousedown/touchstart event:
switch (e.type) {
case 'mousedown':
case 'touchstart':
if (this.painting) { //add
this.stopPainting(); //add
} //add
this.startPainting();
break;
...
Here is a DEMO FIDDLE, try it from mobile device.
I am using very similar code to create a pie chart using canvas as per this article:
http://wickedlysmart.com/how-to-make-a-pie-chart-with-html5s-canvas/
As you can see from this image, there are cases where the labels are upside down:
Here is the code that writes the labels to the graph:
var drawSegmentLabel = function(canvas, context, i) {
context.save();
var x = Math.floor(canvas.width / 2);
var y = Math.floor(canvas.height / 2);
var degrees = sumTo(data, i);
var angle = degreesToRadians(degrees);
context.translate(x, y);
context.rotate(angle);
context.textAlign = 'right';
var fontSize = Math.floor(canvas.height / 32);
context.font = fontSize + 'pt Helvetica';
var dx = Math.floor(canvas.width * 0.3) - 20;
var dy = Math.floor(canvas.height * 0.05);
context.fillText(labels[i], dx, dy);
context.restore();
};
I am trying to rectify this so the text is always readable and not upside down but cant work out how to do it!
Here's my solution! (A little kludgey but seems to work on the basic example, I haven't tested in on edge cases...)
var drawSegmentLabel = function(canvas, context, i) {
context.save();
var x = Math.floor(canvas.width / 2);
var y = Math.floor(canvas.height / 2);
var angle;
var angleD = sumTo(data, i);
var flip = (angleD < 90 || angleD > 270) ? false : true;
context.translate(x, y);
if (flip) {
angleD = angleD-180;
context.textAlign = "left";
angle = degreesToRadians(angleD);
context.rotate(angle);
context.translate(-(x + (canvas.width * 0.5))+15, -(canvas.height * 0.05)-10);
}
else {
context.textAlign = "right";
angle = degreesToRadians(angleD);
context.rotate(angle);
}
var fontSize = Math.floor(canvas.height / 25);
context.font = fontSize + "pt Helvetica";
var dx = Math.floor(canvas.width * 0.5) - 10;
var dy = Math.floor(canvas.height * 0.05);
context.fillText(labels[i], dx, dy);
context.restore();
};
To display the text in the correct way you have to check if the rotation angle is between 90 and 270 degree. If it is then you know the text will be display upside down.
To switch it correctly you then have to rotate you canvas of planed rotation - 180 degree and then to align it in left not right :
var drawSegmentLabel = function(canvas, context, i) {
context.save();
var x = Math.floor(canvas.width / 2);
var y = Math.floor(canvas.height / 2);
var degrees = sumTo(data, i);
var angle = 0;
if (degree > 90 && degree < 270)
angle = degreesToRadians(degrees - 180);
else
angle = degreesToRadians(degrees);
context.translate(x, y);
context.rotate(angle);
context.textAlign = 'right';
var fontSize = Math.floor(canvas.height / 32);
context.font = fontSize + 'pt Helvetica';
var dx = Math.floor(canvas.width * 0.3) - 20;
if (degree > 90 && degree < 270)
dx = 20;
var dy = Math.floor(canvas.height * 0.05);
context.fillText(labels[i], dx, dy);
context.restore();
};
I'm trying to take one side of a rectangle and skew the side based on degree/angle.
I whipped up some code for you
Any questions just ask.
import flash.geom.Matrix;
var temp_matrix = new Matrix();
var square:Sprite = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x000000);
square.graphics.drawRect(0,0,200,100);
square.graphics.endFill();
var angle:Number = -10; // the angle of degrees
temp_matrix.b = Math.PI * 2 * angle / 360;// y skew
//temp_matrix.c = Math.PI * 2 * angle / 360;// x skew
var sourceMatrix:Matrix = square.transform.matrix;// get existing matrix
sourceMatrix.concat(temp_matrix); // apply skew to existing matrix
square.transform.matrix = temp_matrix;// assign the new skew
square.x = 100
square.y = 100
[SECOND ROUND]
var trapezium:Sprite = new Sprite();
addChild(trapezium);
trapezium.x = 100;
trapezium.y = 100;
var dir:Boolean = true;
var side:Boolean = true;
var angle:Number = 0; // the angle of degrees
var w:Number = 300;
var h:Number = 80;
var timer:Timer = new Timer(16);
timer.addEventListener( TimerEvent.TIMER, tick );
timer.start();
function tick(e:TimerEvent):void{
var radians:Number = Math.PI/180*angle;
trapezium.graphics.clear();
trapezium.graphics.beginFill(0x000000)
if( side){
// long side is right side
trapezium.graphics.lineTo(w,0);
trapezium.graphics.lineTo(w,radians*w+h);
trapezium.graphics.lineTo(0,h);
trapezium.graphics.lineTo(0,0);
}else{
trapezium.graphics.lineTo(w,0);
trapezium.graphics.lineTo(w,h);
trapezium.graphics.lineTo(0,radians*w+h);
trapezium.graphics.lineTo(0,0);
}
trapezium.graphics.endFill();
if(angle>=10){
dir = false;
}
if(angle<=0){
dir = true;
}
if(dir){
angle = angle+.2;
}else{
angle = angle-.2;
}
if( Math.floor(angle*10) <= 0 ){
side = !side;
}
}
Take the tangent of the angle and multiply by the width of the rectangle to get the delta y for the bottom axis so you would have
[x1,y1] as the origin of the rectangle (which never changes)
[x1+length, y1+deltaY] as the right bottom corner
Don't know AS, but after editing this looks like filled polygon with vertices:
P0 =(X0, Y0)
P1 = (X1, Y0)
if Angle >= 0 then
P2 = (X1, Y1)
P3 = (X0, Y1 + (X1-X0) * Tan(Angle))
else
P2 = (X1, Y1 - (X1-X0) * Tan(Angle))
P3 = (X0, Y1)