Develop Reference

Three-points projection JS

I have a 2 points projection sketch based on two lines intersection algorithms.
For example, if there's a 3D point { x: -4, y: 2, z: -2 } and axes origin is pre-defined, I could find a = {x: -4, y: 2, z: 0} and b = {x: 0, y: 2, z: -2} points and find one possible intersection of line {vanishingPointX, a) and another line of {vanishingPointZ, b) and as you can see the code works fine.
And the task is to add another 3-rd point, so the output should like this:
it's a rough illustration, some lines are distorted.
I have tried to project Y values along X-axis, but anyway neither there's no algorithm of three lines intersection nor these three lines don't intersect together at one point.
And the last but not least, I am aware that this problem could be solved with matrices, however, I'm trying to do it calculus-free.
const scale = 64.0;
const far = 6.0;
const cube = [
{ x: 1.0, y: 1.0, z: 1.0 },
{ x: 1.0, y: -1.0, z: 1.0 },
{ x: -1.0, y: -1.0, z: 1.0 },
{ x: -1.0, y: 1.0, z: 1.0 },
{ x: 1.0, y: 1.0, z: -1.0 },
{ x: 1.0, y: -1.0, z: -1.0 },
{ x: -1.0, y: -1.0, z: -1.0 },
{ x: -1.0, y: 1.0, z: -1.0 },
];
const sides = [0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7];
let vanishingPointZ = { x: -3.5, y: 2.0 };
let vanishingPointX = { x: 5.0, y: 2.0 };
let vanishingPointY = { x: 0.0, y: -6.0 };
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let zero = { x: canvas.width / 2, y: canvas.height / 2 };
draw();
function draw(){
ctx.font = '32px serif';
ctx.fillStyle = "#0F0"
ctx.fillText('X', zero.x + vanishingPointX.x * scale + 16, zero.y + vanishingPointX.y * scale + 16);
ctx.fillStyle = "#F0F";
ctx.fillText('Y', zero.x + vanishingPointY.x * scale + 32, zero.y + vanishingPointY.y * scale + 16);
ctx.fillStyle = "#00F";
ctx.fillText('Z', zero.x + vanishingPointZ.x * scale - 32, zero.y + vanishingPointZ.y * scale + 16);
cube.forEach((p_, i_) =>{
project(p_);
let pos = { x: zero.x + p_.dx * scale, y: zero.y + p_.dy * scale };
//to x
ctx.beginPath();
ctx.moveTo(zero.x + vanishingPointX.x * scale, zero.y + vanishingPointX.y * scale);
ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.strokeStyle = "rgba(0, 255, 0, 0.33)";
ctx.stroke();
//to z
ctx.beginPath();
ctx.moveTo(zero.x + vanishingPointZ.x * scale, zero.y + vanishingPointZ.y * scale);
ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.strokeStyle = "rgba(0, 0, 255, 0.33)";
ctx.stroke();
//to upper y
//to x
ctx.beginPath();
ctx.moveTo(zero.x + vanishingPointY.x * scale, zero.y + vanishingPointY.y * scale);
ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.strokeStyle = "rgba(255, 0, 255, 0.33)";
ctx.stroke();
ctx.beginPath();
ctx.arc(pos.x, pos.y, 8, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = "#DEDEDE";
ctx.fill();
})
for(let i = 0; i < sides.length; i += 2){
ctx.beginPath();
ctx.moveTo(zero.x + cube[sides[i]].dx * scale, zero.y + cube[sides[i]].dy * scale);
ctx.lineTo(zero.x + cube[sides[i + 1]].dx * scale, zero.y + cube[sides[i + 1]].dy * scale);
ctx.closePath();
ctx.strokeStyle = "#000";
ctx.stroke();
}
}
function project(p_){
let distX = Math.sqrt(Math.pow(vanishingPointX.x, 2), Math.pow(vanishingPointX.y - p_.y, 2));
let vx = { x: vanishingPointX.x, y: vanishingPointX.y - p_.y };
let nx = Math.exp( p_.x / far );
vx.x *= nx;
vx.y *= nx;
let x = { x: vanishingPointX.x - vx.x, y: vanishingPointX.y - vx.y };
let distZ = Math.sqrt(Math.pow(vanishingPointZ.x, 2), Math.pow(vanishingPointZ.y - p_.y, 2));
let vz = { x: vanishingPointZ.x, y: vanishingPointZ.y - p_.y };
let nz = Math.exp( p_.z / far );
vz.x *= nz;
vz.y *= nz;
let z = { x: vanishingPointZ.x - vz.x, y: vanishingPointZ.y - vz.y };
let out = twoLinesIntersection(vanishingPointZ, z, vanishingPointX, x);
//trying to calculate y projection and it seems that as standalone it work fine
let distY = Math.sqrt(Math.pow(vanishingPointY.x, 2), Math.pow(vanishingPointX.y - p_.x, 2));
let vy = { x: vanishingPointY.y, y: vanishingPointY.y - p_.x };
let ny = Math.exp( p_.y / far );
vy.x *= ny;
vy.y *= ny;
let y = { x: vanishingPointY.x - vy.x, y: vanishingPointY.y - vy.y };
p_.dx = out.x;
p_.dy = out.y;
}
function twoLinesIntersection(p1_, p4_, p3_, p2_){
let d1 = (p1_.x - p2_.x) * (p3_.y - p4_.y);
let d2 = (p1_.y - p2_.y) * (p3_.x - p4_.x);
let d = (d1) - (d2);
let u1 = (p1_.x * p2_.y - p1_.y * p2_.x);
let u4 = (p3_.x * p4_.y - p3_.y * p4_.x);
let u2x = p3_.x - p4_.x;
let u3x = p1_.x - p2_.x;
let u2y = p3_.y - p4_.y;
let u3y = p1_.y - p2_.y;
return { x: (u1 * u2x - u3x * u4) / d, y: (u1 * u2y - u3y * u4) / d };
}
body { margin: 0; }
<canvas id='canvas' width='800' height='800'></canvas>

We can make this easier to compute by, rather than adding vector compounds to a start coordinate until we're at the "real" coordinate, treating the problem as one of line intersections. For example, if we want the point XYZ = (1,2,2) we can find it using line intersections by following this visual "recipe":
For any 3D point we can first compute the points on the YZ and XY planes, after which we can find the true point with one more line intersection. This does rely on knowing where on the screen our origin can be found (we could pick a point in the middle of the triangle Z-Y-X, but whatever screen point we pick, let's call that C, after which the code looks like this:
function get(x, y, z) {
if (x===0 && y===0 && z===0) return C;
// Get the points at the distances along our Z and X axes:
const px = lerp(C, X, perspectiveMap(x));
const pz = lerp(C, Z, perspectiveMap(z));
// If our 3D coordinate lies on the XZ plane, then this
// is just a matter of finding the line/line intersection:
if (y==0) return twoLinesIntersection(X, pz, Z, px);
// If it's not, we construct the two points on the YZ and XY planes:
const py = lerp(C, Y, perspectiveMap(y));
const YZ = twoLinesIntersection(Y, pz, Z, py);
const XY = twoLinesIntersection(Y, px, X, py);
// And then the 3D coordinate is a line/line intersection with those.
return twoLinesIntersection(XY, Z, X, YZ);
}
function lerp(v1, v2, r) {
const mr = 1 - r;
return {
x: v1.x * mr + v2.x * r,
y: v1.y * mr + v2.y * r,
z: v1.z * mr + v2.z * r,
};
}
With the perspective mapping function turns a value on the axis into a distance ratio between the origin and the axis' vanishing point. What that function looks like is effectively up to you, but if we want straight lines to stay straight, we'll want a rational perspective function:
const DEFAULT_PERSPECTIVE_STRENGTH = 0.3;
function perspectiveMap(value, strength=DEFAULT_PERSPECTIVE_STRENGTH) {
return 1 - 1/(1 + value * strength);
}
(we computer "1 minus..." because as a ratio between the origin and a vanishing point, we want this value to be 0 at x/y/z=0, so that lerp(origin, vanishingPoint, value) yields the origin, and we want it to become 1 as x/y/z approach infinity. Just on its own, 1/(1+v*s) does the exact opposite of that, so subtracting it from one "flips" it around)
Implemented as a snippet:
const w = 600, h = 300;
perspective.width = w;
perspective.height = h;
const DEFAULT_PERSPECTIVE_STRENGTH = 0.2;
const ctx = perspective.getContext("2d");
// our vanishing points and origin
let Z = { x: w*0.05, y: h*0.85 };
let X = { x: w*0.92, y: h*0.95 };
let Y = { x: w*0.65, y: h*0.1 };
let C = { x: w*0.65, y: h*0.50 };
// draw our "grid" and labels
line(X,C);
line(Y,C);
line(Z,C);
ctx.strokeStyle = `#00000020`;
drawGrid(10);
ctx.fillStyle = `#400`;
text("X", X, 10, 0);
text("Z", Z, -10, 0);
text("Y", Y, 0, -5);
// draw a 2x2x2 cube
ctx.strokeStyle = `#000000`;
drawCube(2);
// ------------ functions for content ------------
function drawGrid(e) {
for(let i=0; i<e; i++) {
line(X, get(0,i,0));
line(X, get(0,0,i));
line(Y, get(i,0,0));
line(Y, get(0,0,i));
line(Z, get(i,0,0));
line(Z, get(0,i,0));
}
}
function drawCube(n) {
const cube = getCube(n);
const [p1,p2,p3,p4,p5,p6,p7,p8] = cube.map(p => get(p));
quad(p1,p2,p3,p4);
quad(p5,p6,p7,p8);
line(p1,p5);
line(p2,p6);
line(p3,p7);
line(p4,p8);
}
function getCube(n) {
return [
{x: n, y: n, z: n},
{x: 0, y: n, z: n},
{x: 0, y: n, z: 0},
{x: n, y: n, z: 0},
{x: n, y: 0, z: n},
{x: 0, y: 0, z: n},
{x: 0, y: 0, z: 0},
{x: n, y: 0, z: 0},
];
}
// ------------ some draw util functions ------------
function line(p1, p2) {
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
}
function quad(p1, p2, p3, p4) {
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.lineTo(p3.x, p3.y);
ctx.lineTo(p4.x, p4.y);
ctx.closePath();
ctx.stroke();
}
function text(str, point, ox=0, oy=0) {
const { x, y } = point;
ctx.fillText(str, x+ox, y+oy);
}
// ------------ and: our coordinate computer ------------
function get(x,y,z) {
if (y === undefined) {
z = x.z;
y = x.y;
x = x.x
}
if (x===0 && y===0 && z===0) return C;
const px = lerp(C, X, map(x));
const pz = lerp(C, Z, map(z));
if (y==0) return lli(X, pz, Z, px);
const py = lerp(C, Y, map(y));
const YZ = lli(Y, pz, Z, py);
const XY = lli(Y, px, X, py);
return lli(XY, Z, X, YZ);
}
function lerp(v1, v2, r) {
const mr = 1 - r;
return {
x: v1.x * mr + v2.x * r,
y: v1.y * mr + v2.y * r,
z: v1.z * mr + v2.z * r
}
}
function lli(p1,p2,p3,p4) {
return lli8(p1.x,p1.y,p2.x,p2.y,p3.x,p3.y,p4.x,p4.y);
}
function lli8(x1,y1,x2,y2,x3,y3,x4,y4) {
const d = (x1-x2)*(y3-y4) - (y1-y2)*(x3-x4);
if (d === 0) return undefined;
const f12 = (x1*y2 - y1*x2);
const f34 = (x3*y4 - y3*x4);
const nx = f12*(x3-x4) - (x1-x2)*f34;
const ny = f12*(y3-y4) - (y1-y2)*f34;
return { x: nx/d, y: ny/d };
}
function map(value, strength=DEFAULT_PERSPECTIVE_STRENGTH) {
return 1 - 1/(1 + value*strength);
}
canvas { border: 1px solid black; }
<canvas id="perspective">

How to make spin the wheel game in ionic with probability

I am developing a game in ionic 4 'spin the wheel'. so far I am able to spin the wheel which stops randomly on any of the sections. Can anyone help me with setting probability to sections so that users will have fewer chances to win? I would like to pre-define each section with some percentage value. for eg section with 0 will have 50% 4 will have 10% etc, and the greatest value will have a 1% chance to win. below code, I have tried.
SpinWheel.ts
export class SpinWheel {
#ViewChild('myCanvas', { static: false }) myCanvas: ElementRef;
colors = ["#2a8251", "#dc0927", "#414243", "#dc0927", "#2E2C75",
"#dc0927", "#414243", "#dc0927", "#2E2C75",
"#dc0927"];
restaraunts = ["0", "32", "15", "19",
"4", "21", "2", "25",
"17", "34"];
startAngle = 0;
arc = 2 * Math.PI / 10;
spinTimeout = null;
spinArcStart = 10;
spinTime = 0;
spinTimeTotal = 0;
ctx;
spinAngleStart;
constructor() {
}
ngOnInit() {
}
ngAfterViewInit(): void {
this.draw();
}
draw() {
this.drawRouletteWheel();
}
drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
var outsideRadius = 140;
var textRadius = 120;
var insideRadius = 25;
this.ctx = (<HTMLCanvasElement>this.myCanvas.nativeElement).getContext('2d');
this.ctx.clearRect(0, 0, 500, 500);
this.ctx.strokeStyle = "black";
this.ctx.lineWidth = 2;
this.ctx.font = 'bold 12px sans-serif';
for (var i = 0; i < 10; i++) {
var angle = this.startAngle + i * this.arc;
this.ctx.fillStyle = this.colors[i];
this.ctx.beginPath();
this.ctx.arc(150, 150, outsideRadius, angle, angle + this.arc, false);
this.ctx.arc(150, 150, insideRadius, angle + this.arc, angle, true);
this.ctx.stroke();
this.ctx.fill();
this.ctx.save();
this.ctx.shadowOffsetX = -1;
this.ctx.shadowOffsetY = -1;
this.ctx.shadowBlur = 0;
//this.ctx.shadowColor = "rgb(220,220,220)";
this.ctx.fillStyle = "white";
this.ctx.translate(150 + Math.cos(angle + this.arc / 2) * textRadius, 150 + Math.sin(angle + this.arc / 2) * textRadius);
this.ctx.rotate(angle + this.arc / 2 + Math.PI / 2);
var text = this.restaraunts[i];
this.ctx.fillText(text, -this.ctx.measureText(text).width / 2, 0);
this.ctx.restore();
}
//Arrow
this.ctx.fillStyle = "black";
this.ctx.beginPath();
this.ctx.moveTo(150 - 4, 150 - (outsideRadius + 5));
this.ctx.lineTo(150 + 4, 150 - (outsideRadius + 5));
this.ctx.lineTo(150 + 4, 150 - (outsideRadius - 5));
this.ctx.lineTo(150 + 9, 150 - (outsideRadius - 5));
this.ctx.lineTo(150 + 0, 150 - (outsideRadius - 13));
this.ctx.lineTo(150 - 9, 150 - (outsideRadius - 5));
this.ctx.lineTo(150 - 4, 150 - (outsideRadius - 5));
this.ctx.lineTo(150 - 4, 150 - (outsideRadius + 5));
this.ctx.fill();
}
spin() {
this.spinAngleStart = Math.random() * 10 + 10;
this.spinTime = 0;
this.spinTimeTotal = Math.random() * 3 + 4 * 1000;
this.rotateWheel();
}
rotateWheel() {
this.spinTime += 30;
if (this.spinTime >= this.spinTimeTotal) {
this.stopRotateWheel();
return;
}
var spinAngle = this.spinAngleStart - this.easeOut(this.spinTime, 0, this.spinAngleStart, this.spinTimeTotal);
this.startAngle += (spinAngle * Math.PI / 180);
this.drawRouletteWheel();
this.spinTimeout = setTimeout(() => {
this.rotateWheel();
}, 30);
}
stopRotateWheel() {
clearTimeout(this.spinTimeout);
var degrees = this.startAngle * 180 / Math.PI + 90;
var arcd = this.arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
this.ctx.save();
this.ctx.font = 'bold 30px sans-serif';
var text = this.restaraunts[index]
//this.ctx.fillText(text, 150 - this.ctx.measureText(text).width / 2, 150 + 10);
alert("You got:\n" + text);
this.ctx.restore();
}
// t: current time
// b: start value
// c: change in value
// d: duration
easeOut(t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
}
}
spin_wheel.html
<div class="wheel">
<canvas #myCanvas width="auto" height="300"></canvas>
<div class="icon-center"><img class="app-logo" (click)="spin()" src="../../assets/icon/favicon.png"/></div>
</div>
See attached image spin wheel screen
Thanks in advance.

Convert code from canvas to svg

I have a code in canvas which help me in making gas triangles(duval triangles).
I need to convert the code from canvas to svg.
One of the reason why I moving from canvas to svg, is because I can't add event handlers in canvas(which act like bitmap) but in svg I can do it.
1.Is it possible?
2.Can I do the same things in canvas also in svg?
3.Should I use libraries to help me in writing svg, any recommendations for specific svg library?
My code is based on the following post:
how to create Duval Triangle in canvas
$(function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// https://www.researchgate.net/publication/4345236_A_Software_Implementation_of_the_Duval_Triangle_Method
var v0 = {
x: 58,
y: 845
};
var v1 = {
x: 984,
y: 845
};
var v2 = {
x: 521,
y: 41
};
var triangle = [v0, v1, v2];
// Define all your segments here
var segments = [{
points: [{
x: 58,
y: 845
}, {
x: 272,
y: 845
}, {
x: 567,
y: 333
}, {
x: 461,
y: 150
}],
fill: 'rgb(172,236,222)',
label: {
text: 'D1',
cx: 300,
cy: 645,
withLine: false,
endX: null,
endY: null
},
}, {
points: [{
x: 272,
y: 845
}, {
x: 567,
y: 333
}, {
x: 646,
y: 468
}, {
x: 572,
y: 597
}, {
x: 716,
y: 845
}],
fill: 'deepskyblue',
label: {
text: 'D2',
cx: 490,
cy: 645,
withLine: false,
endX: null,
endY: null
},
}, {
points: [{
x: 716,
y: 845
}, {
x: 845,
y: 845
}, {
x: 683,
y: 565
}, {
x: 734,
y: 476
}, {
x: 503,
y: 76
}, {
x: 461,
y: 150
}, {
x: 646,
y: 468
}, {
x: 572,
y: 595
}],
fill: 'lightCyan',
label: {
text: 'DT',
cx: 656,
cy: 645,
withLine: false,
endX: 366,
endY: 120
},
}, { //here - I am in hell.-s5
points: [{
x: 530,
y: 59
}, {
x: 512,
y: 59
}, {
x: 521,
y: 41
}],
fill: 'black',
label: {
text: 'PD',
cx: 600,
cy: 52,
withLine: true,
endX: 520,
endY: 70
},
}, {
points: [{
x: 595,
y: 235
}, {
x: 614,
y: 203
}, {
x: 530,
y: 59
}, {
x: 512,
y: 59
}, {
x: 503,
y: 76
}],
fill: 'navajoWhite',
label: {
text: 'T1',
cx: 670,
cy: 140,
withLine: true,
endX: 574,
endY: 105
},
}, {
points: [{
x: 753,
y: 446
}, {
x: 735,
y: 476
}, {
x: 595,
y: 235
}, {
x: 614,
y: 203
}],
fill: 'tan',
label: {
text: 'T2',
cx: 800,
cy: 290,
withLine: true,
endX: 662,
endY: 120
},
}, {
points: [{
x: 845,
y: 845
}, {
x: 683,
y: 565
}, {
x: 753,
y: 446
}, {
x: 984,
y: 845
}],
fill: 'peru',
label: {
text: 'T3',
cx: 800,
cy: 645,
withLine: false,
endX: null,
endY: null
},
}, ];
// label styles
var labelfontsize = 12;
var labelfontface = 'verdana';
var labelpadding = 3;
// pre-create a canvas-image of the arrowhead
var arrowheadLength = 10;
var arrowheadWidth = 8;
var arrowhead = document.createElement('canvas');
premakeArrowhead();
var legendTexts = ['PD = Partial Discharge',
'DT = Discharges and Thermal',
'T1 = Thermal fault T < 300 ℃',
'T2 = Thermal fault 300 ℃ < T < 700 ℃',
'T3 = Thermal fault T > 700 ℃',
'D1 = Discharges of low energy',
'D2 = Discharges of high energy'
];
// start drawing
/////////////////////
// draw colored segments inside triangle
for (var i = 0; i < segments.length; i++) {
drawSegment(segments[i]);
}
// draw ticklines
ticklines(v0, v1, 9, Math.PI * 1.2, 20);
ticklines(v1, v2, 9, Math.PI * 3 / 4, 20);
ticklines(v2, v0, 9, Math.PI * 2, 20);
// molecules
moleculeLabel(v0, v1, 100, Math.PI / 2, '% CH4');
moleculeLabel(v1, v2, 100, 0, '% C2H4');
moleculeLabel(v2, v0, 100, Math.PI, '% C2H2');
// draw outer triangle
drawTriangle(triangle);
// draw legend
drawLegend(legendTexts, 10, 10, 12.86);
drawCircle(canvas.width / 3, canvas.height / 2, 2.5, 'red');
// end drawing
/////////////////////
function drawCircle(point1, point2, radius, color) {
ctx.beginPath();
ctx.arc(point1, point2, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = color;
ctx.fill();
}
function drawSegment(s) {
// draw and fill the segment path
ctx.beginPath();
ctx.moveTo(s.points[0].x, s.points[0].y);
for (var i = 1; i < s.points.length; i++) {
ctx.lineTo(s.points[i].x, s.points[i].y);
}
ctx.closePath();
ctx.fillStyle = s.fill;
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
// draw segment's box label
if (s.label.withLine) {
lineBoxedLabel(s, labelfontsize, labelfontface, labelpadding);
} else {
boxedLabel(s, labelfontsize, labelfontface, labelpadding);
}
}
function moleculeLabel(start, end, offsetLength, angle, text) {
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'
ctx.font = '14px verdana';
var dx = end.x - start.x;
var dy = end.y - start.y;
var x0 = parseInt(start.x + dx * 0.50);
var y0 = parseInt(start.y + dy * 0.50);
var x1 = parseInt(x0 + offsetLength * Math.cos(angle));
var y1 = parseInt(y0 + offsetLength * Math.sin(angle));
ctx.fillStyle = 'black';
ctx.fillText(text, x1, y1);
// arrow
var x0 = parseInt(start.x + dx * 0.35);
var y0 = parseInt(start.y + dy * 0.35);
var x1 = parseInt(x0 + 50 * Math.cos(angle));
var y1 = parseInt(y0 + 50 * Math.sin(angle));
var x2 = parseInt(start.x + dx * 0.65);
var y2 = parseInt(start.y + dy * 0.65);
var x3 = parseInt(x2 + 50 * Math.cos(angle));
var y3 = parseInt(y2 + 50 * Math.sin(angle));
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x3, y3);
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.stroke();
var angle = Math.atan2(dy, dx);
ctx.save(); // save
ctx.translate(x3, y3);
ctx.rotate(angle);
ctx.drawImage(arrowhead, -arrowheadLength, -arrowheadWidth / 2);
ctx.restore()
}
function boxedLabel(s, fontsize, fontface, padding) {
var centerX = s.label.cx;
var centerY = s.label.cy;
var text = s.label.text;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'
ctx.font = fontsize + 'px ' + fontface
var textwidth = ctx.measureText(text).width;
var textheight = fontsize * 1.286;
var leftX = centerX - textwidth / 2 - padding;
var topY = centerY - textheight / 2 - padding;
ctx.fillStyle = 'white';
ctx.fillRect(leftX, topY, textwidth + padding * 2, textheight + padding * 2);
ctx.lineWidth = 1;
ctx.strokeRect(leftX, topY, textwidth + padding * 2, textheight + padding * 2);
ctx.fillStyle = 'black';
ctx.fillText(text, centerX, centerY);
}
function lineBoxedLabel(s, fontsize, fontface, padding) {
var centerX = s.label.cx;
var centerY = s.label.cy;
var text = s.label.text;
var lineToX = s.label.endX;
var lineToY = s.label.endY;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'
ctx.font = fontsize + 'px ' + fontface
var textwidth = ctx.measureText(text).width;
var textheight = fontsize * 1.286;
var leftX = centerX - textwidth / 2 - padding;
var topY = centerY - textheight / 2 - padding;
// the line
ctx.beginPath();
ctx.moveTo(leftX, topY + textheight / 2);
ctx.lineTo(lineToX, topY + textheight / 2);
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.stroke();
// the boxed text
ctx.fillStyle = 'white';
ctx.fillRect(leftX, topY, textwidth + padding * 2, textheight + padding * 2);
ctx.strokeRect(leftX, topY, textwidth + padding * 2, textheight + padding * 2);
ctx.fillStyle = 'black';
ctx.fillText(text, centerX, centerY);
}
function ticklines(start, end, count, angle, length) {
var dx = end.x - start.x;
var dy = end.y - start.y;
ctx.lineWidth = 1;
for (var i = 1; i < count; i++) {
var x0 = parseInt(start.x + dx * i / count);
var y0 = parseInt(start.y + dy * i / count);
var x1 = parseInt(x0 + length * Math.cos(angle));
var y1 = parseInt(y0 + length * Math.sin(angle));
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.stroke();
if (i == 2 || i == 4 || i == 6 || i == 8) {
var labelOffset = length * 3 / 4;
var x1 = parseInt(x0 - labelOffset * Math.cos(angle));
var y1 = parseInt(y0 - labelOffset * Math.sin(angle));
ctx.fillStyle = 'black';
ctx.fillText(parseInt(i * 10), x1, y1);
}
}
}
function premakeArrowhead() {
var actx = arrowhead.getContext('2d');
arrowhead.width = arrowheadLength;
arrowhead.height = arrowheadWidth;
actx.beginPath();
actx.moveTo(0, 0);
actx.lineTo(arrowheadLength, arrowheadWidth / 2);
actx.lineTo(0, arrowheadWidth);
actx.closePath();
actx.fillStyle = 'black';
actx.fill();
}
function drawTriangle(t) {
ctx.beginPath();
ctx.moveTo(t[0].x, t[0].y);
ctx.lineTo(t[1].x, t[1].y);
ctx.lineTo(t[2].x, t[2].y);
ctx.closePath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();
}
function drawLegend(texts, x, y, lineheight) {
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillStyle = 'black';
ctx.font = '12px arial';
for (var i = 0; i < texts.length; i++) {
ctx.fillText(texts[i], x, y + i * lineheight);
}
}
})
body {
background-color: ivory;
padding: 10px;
}
#canvas {
border: 1px solid red;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width=1024 height=1020></canvas>

Yes it is possible.
You can do more things on svg than on canvas.
You can try SVG.JS library. It is lightweight and easy to use.

Try fabric JS to convert canvas to svg. JsFiddle
HTML
<canvas id="canvas" width=1024 height=1020></canvas>
<button id="canvas2svg">Canvas 2 SVG</button>
JS
var canvas = new fabric.Canvas('canvas', { isDrawingMode: true });
//var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
$("#canvas2svg").click(function(){
canvas.isDrawingMode = false;
alert(canvas.toSVG());
});
JsFiddle
Also refer this example fiddle

Raphael Graph - set fixed range

I'd like to be able to cater for missing graph points by breaking the graph line where data is missing.
I think I can achieve this by specifying a fixed range?
For example, if the x-axis should contain every hour in the day and the y-axis contains percentage values, I want the x-axis to always have a full range of 24 hour values.
However, the code is taking the set of times for which data exists and is using them as the range for the x-axis. If no data was present for times between 4 - 11 then the graph shows a straight line between 4 and 11, 5,6,7,8,9 and 10 don't appear on the x-axis and this is not what I want.
Here is the code...
Raphael.fn.drawGrid = function (x, y, w, h, wv, hv, color) {
color = color || "#000";
var path = ["M", Math.round(x) + .5, Math.round(y) + .5, "L", Math.round(x + w) + .5, Math.round(y) + .5, Math.round(x + w) + .5, Math.round(y + h) + .5, Math.round(x) + .5, Math.round(y + h) + .5, Math.round(x) + .5, Math.round(y) + .5],
rowHeight = h / hv,
columnWidth = w / wv;
for (var i = 1; i < hv; i++) {
path = path.concat(["M", Math.round(x) + .5, Math.round(y + i * rowHeight) + .5, "H", Math.round(x + w) + .5]);
}
for (i = 1; i < wv; i++) {
path = path.concat(["M", Math.round(x + i * columnWidth) + .5, Math.round(y) + .5, "V", Math.round(y + h) + .5]);
}
return this.path(path.join(",")).attr({stroke: color});
};
$(function () {
$("#data").css({
position: "absolute",
left: "-9999em",
top: "-9999em"
});
});
window.onload = function () {
function getAnchors(p1x, p1y, p2x, p2y, p3x, p3y) {
var l1 = (p2x - p1x) / 2,
l2 = (p3x - p2x) / 2,
a = Math.atan((p2x - p1x) / Math.abs(p2y - p1y)),
b = Math.atan((p3x - p2x) / Math.abs(p2y - p3y));
a = p1y < p2y ? Math.PI - a : a;
b = p3y < p2y ? Math.PI - b : b;
var alpha = Math.PI / 2 - ((a + b) % (Math.PI * 2)) / 2,
dx1 = l1 * Math.sin(alpha + a),
dy1 = l1 * Math.cos(alpha + a),
dx2 = l2 * Math.sin(alpha + b),
dy2 = l2 * Math.cos(alpha + b);
return {
x1: p2x - dx1,
y1: p2y + dy1,
x2: p2x + dx2,
y2: p2y + dy2
};
}
// Grab the data
var labels = [],
data = [];
$("#data tfoot th").each(function () {
labels.push($(this).html());
});
$("#data tbody td").each(function () {
data.push($(this).html());
});
// Draw
var width = 800,
height = 250,
leftgutter = 30,
bottomgutter = 20,
topgutter = 20,
colorhue = .6 || Math.random(),
color = "hsl(" + [colorhue, .5, .5] + ")",
r = Raphael("holder", width, height),
txt = {font: '12px Helvetica, Arial', fill: "#fff"},
txt1 = {font: '10px Helvetica, Arial', fill: "#fff"},
txt2 = {font: '12px Helvetica, Arial', fill: "#000"},
X = (width - leftgutter) / labels.length,
max = Math.max.apply(Math, data),
Y = (height - bottomgutter - topgutter) / max;
r.drawGrid(leftgutter + X * .5 + .5, topgutter + .5, width - leftgutter - X, height - topgutter - bottomgutter, 10, 10, "#000");
var path = r.path().attr({stroke: color, "stroke-width": 4, "stroke-linejoin": "round"}),
bgp = r.path().attr({stroke: "none", opacity: .3, fill: color}),
label = r.set(),
lx = 0, ly = 0,
is_label_visible = false,
leave_timer,
blanket = r.set();
label.push(r.text(60, 12, "24 hits").attr(txt));
label.push(r.text(60, 27, "22 September 2008").attr(txt1).attr({fill: color}));
label.hide();
var frame = r.popup(100, 100, label, "right").attr({fill: "#000", stroke: "#666", "stroke-width": 2, "fill-opacity": .7}).hide();
var p, bgpp;
for (var i = 0, ii = labels.length; i < ii; i++) {
var y = Math.round(height - bottomgutter - Y * data[i]),
x = Math.round(leftgutter + X * (i + .5)),
t = r.text(x, height - 6, labels[i]).attr(txt).toBack();
if (!i) {
p = ["M", x, y, "C", x, y];
bgpp = ["M", leftgutter + X * .5, height - bottomgutter, "L", x, y, "C", x, y];
}
if (i && i < ii - 1) {
var Y0 = Math.round(height - bottomgutter - Y * data[i - 1]),
X0 = Math.round(leftgutter + X * (i - .5)),
Y2 = Math.round(height - bottomgutter - Y * data[i + 1]),
X2 = Math.round(leftgutter + X * (i + 1.5));
var a = getAnchors(X0, Y0, x, y, X2, Y2);
p = p.concat([a.x1, a.y1, x, y, a.x2, a.y2]);
bgpp = bgpp.concat([a.x1, a.y1, x, y, a.x2, a.y2]);
}
var dot = r.circle(x, y, 4).attr({fill: "#333", stroke: color, "stroke-width": 2});
blanket.push(r.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({stroke: "none", fill: "#fff", opacity: 0}));
var rect = blanket[blanket.length - 1];
(function (x, y, data, lbl, dot) {
var timer, i = 0;
rect.hover(function () {
clearTimeout(leave_timer);
var side = "right";
if (x + frame.getBBox().width > width) {
side = "left";
}
var ppp = r.popup(x, y, label, side, 1),
anim = Raphael.animation({
path: ppp.path,
transform: ["t", ppp.dx, ppp.dy]
}, 200 * is_label_visible);
lx = label[0].transform()[0][1] + ppp.dx;
ly = label[0].transform()[0][2] + ppp.dy;
frame.show().stop().animate(anim);
label[0].attr({text: data + " hit" + (data == 1 ? "" : "s")}).show().stop().animateWith(frame, anim, {transform: ["t", lx, ly]}, 200 * is_label_visible);
label[1].attr({text: lbl + " September 2008"}).show().stop().animateWith(frame, anim, {transform: ["t", lx, ly]}, 200 * is_label_visible);
dot.attr("r", 6);
is_label_visible = true;
}, function () {
dot.attr("r", 4);
leave_timer = setTimeout(function () {
frame.hide();
label[0].hide();
label[1].hide();
is_label_visible = false;
}, 1);
});
})(x, y, data[i], labels[i], dot);
}
p = p.concat([x, y, x, y]);
bgpp = bgpp.concat([x, y, x, y, "L", x, height - bottomgutter, "z"]);
path.attr({path: p});
bgp.attr({path: bgpp});
frame.toFront();
label[0].toFront();
label[1].toFront();
blanket.toFront();
};

Trying to create a confetti effect in html5, how do I get a different fill color for each element?

EDIT:
For anybody who is curious, here is the finished result.
http://jsfiddle.net/Javalsu/vxP5q/743/embedded/result/
I'm building off of the code I found in this link
http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect
I want to make this more of a confetti falling effect than a snow effect, and I would need to make each element a different color. But it seems that the fill color is set for entire canvas at once.
Is there a way to specify a different fill color for each element or am I going about this the entirely wrong way?
Thanks
Update: Here is the finished product if anybody has a need for confetti
http://jsfiddle.net/mj3SM/6/
window.onload = function () {
//canvas init
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//canvas dimensions
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
//snowflake particles
var mp = 200; //max particles
var particles = [];
for (var i = 0; i < mp; i++) {
particles.push({
x: Math.random() * W, //x-coordinate
y: Math.random() * H, //y-coordinate
r: Math.random() * 15 + 1, //radius
d: Math.random() * mp, //density
color: "rgba(" + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", 0.8)",
tilt: Math.floor(Math.random() * 5) - 5
});
}
//Lets draw the flakes
function draw() {
ctx.clearRect(0, 0, W, H);
for (var i = 0; i < mp; i++) {
var p = particles[i];
ctx.beginPath();
ctx.lineWidth = p.r;
ctx.strokeStyle = p.color; // Green path
ctx.moveTo(p.x, p.y);
ctx.lineTo(p.x + p.tilt + p.r / 2, p.y + p.tilt);
ctx.stroke(); // Draw it
}
update();
}
//Function to move the snowflakes
//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
var angle = 0;
function update() {
angle += 0.01;
for (var i = 0; i < mp; i++) {
var p = particles[i];
//Updating X and Y coordinates
//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
//Every particle has its own density which can be used to make the downward movement different for each flake
//Lets make it more random by adding in the radius
p.y += Math.cos(angle + p.d) + 1 + p.r / 2;
p.x += Math.sin(angle) * 2;
//Sending flakes back from the top when it exits
//Lets make it a bit more organic and let flakes enter from the left and right also.
if (p.x > W + 5 || p.x < -5 || p.y > H) {
if (i % 3 > 0) //66.67% of the flakes
{
particles[i] = {
x: Math.random() * W,
y: -10,
r: p.r,
d: p.d,
color: p.color,
tilt: p.tilt
};
} else {
//If the flake is exitting from the right
if (Math.sin(angle) > 0) {
//Enter from the left
particles[i] = {
x: -5,
y: Math.random() * H,
r: p.r,
d: p.d,
color: p.color,
tilt: p.tilt
};
} else {
//Enter from the right
particles[i] = {
x: W + 5,
y: Math.random() * H,
r: p.r,
d: p.d,
color: p.color,
tilt: p.tilt
};
}
}
}
}
}
//animation loop
setInterval(draw, 20);
}

Try it like this: http://jsfiddle.net/vxP5q/
The JS:
window.onload = function(){
//canvas init
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//canvas dimensions
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
//snowflake particles
var mp = 25; //max particles
var particles = [];
for(var i = 0; i < mp; i++)
{
particles.push({
x: Math.random()*W, //x-coordinate
y: Math.random()*H, //y-coordinate
r: Math.random()*4+1, //radius
d: Math.random()*mp, //density
color: "rgba(" + Math.floor((Math.random() * 255)) +", " + Math.floor((Math.random() * 255)) +", " + Math.floor((Math.random() * 255)) + ", 0.8)"
})
}
//Lets draw the flakes
function draw()
{
ctx.clearRect(0, 0, W, H);
for(var i = 0; i < mp; i++)
{
var p = particles[i];
ctx.beginPath();
ctx.fillStyle = p.color;
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
ctx.fill();
}
update();
}
//Function to move the snowflakes
//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
var angle = 0;
function update()
{
angle += 0.01;
for(var i = 0; i < mp; i++)
{
var p = particles[i];
//Updating X and Y coordinates
//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
//Every particle has its own density which can be used to make the downward movement different for each flake
//Lets make it more random by adding in the radius
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
p.x += Math.sin(angle) * 2;
//Sending flakes back from the top when it exits
//Lets make it a bit more organic and let flakes enter from the left and right also.
if(p.x > W+5 || p.x < -5 || p.y > H)
{
if(i%3 > 0) //66.67% of the flakes
{
particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d, color : p.color};
}
else
{
//If the flake is exitting from the right
if(Math.sin(angle) > 0)
{
//Enter from the left
particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d, color: p.color};
}
else
{
//Enter from the right
particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d, color : p.color};
}
}
}
}
}
//animation loop
setInterval(draw, 33);
}
What I've done. Where the pixels are generated I've added an unique (random) color. Where the update is, I'm making sure the colors are changed and where its drawn I've changed it so that it will create an inuque path for each confetti item.

Great question. Consider the drawing loop for the sample:
ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
ctx.beginPath();
for(var i = 0; i < mp; i++)
{
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
}
ctx.fill();
It is making one path, adding many arcs, and then filling it one time.
To change it you will need to fill it once per particle instead. You'll also want to give each particle a unique color:
for (var i = 0; i < mp; i++) {
var p = particles[i];
ctx.fillStyle = p.color;
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
ctx.fill();
}
Note how beginPath() and fill() are now inside the loop. This is important, because each arc needs its own path and fill. This is much slower than making them all with one path, but is necessary if you want different colored particles.
That p.color:
particles.push({
x: Math.random() * W, //x-coordinate
y: Math.random() * H, //y-coordinate
r: Math.random() * 4 + 1, //radius
d: Math.random() * mp, //density
// I'm new!
color: "rgba(" + Math.floor(Math.random()*255) +
", " + Math.floor(Math.random()*255) + ", 255, 0.8)"
})
Here's a working example:
http://jsfiddle.net/j4NZK/1/

Here is a version based on the post by Niels, I wanted a reusable object that I can call and add to any page.
Usage:
confetti.Init(#IdofContainer(div)#, 50,25,100)
Code:
var confetti = {
angle: 0,
ctx: 0,
H: 0,
W: 0,
mp: 0,
particles: [],
endFunction: '',
Init: function (parent, maxParticles, iCount, speed, endFunct) {
confetti.stopped = false;
confetti.runner = null;
confetti.endFunction = endFunct;
var canvas = document.getElementById("confettiCanvasId");
if (canvas) {
canvas.parentNode.removeChild(canvas);
}
canvas = document.createElement('canvas');
canvas.className = 'confettiCanvas';
canvas.id = 'confettiCanvasId'
$id(parent).appendChild(canvas);
var ctx = canvas.getContext("2d");
var W = $id(parent).clientHeight;
var H = $id(parent).clientWidth;
canvas.width = W;
canvas.height = H;
confetti.particles = [];
for (var i = 0; i < maxParticles; i++) {
confetti.particles.push({
x: Math.random() * W,
y: Math.random() * H,
r: Math.random() * 4 + 1, //radius
d: Math.random() * maxParticles, //density
color: "rgba(" + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", 0.8)"
});
}
myCounter = new confetti.Counter({
seconds: iCount,
speed: speed,
onUpdateStatus: function (sec) {
$l(Math.random() * 255)
ctx.clearRect(0, 0, W, H);
for (var i = 0; i < maxParticles; i++) {
var p = confetti.particles[i];
ctx.beginPath();
ctx.fillStyle = p.color;
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
ctx.fill();
}
confetti.angle += 0.01;
for (var i = 0; i < maxParticles; i++) {
var p = confetti.particles[i];
p.y += Math.cos(confetti.angle + p.d) + 1 + p.r / 2;
p.x += Math.sin(confetti.angle) * 2;
if (p.x > W + 5 || p.x < -5 || p.y > H) {
if (i % 3 > 0) //66.67% of the flakes
{
confetti.particles[i] = {x: Math.random() * W, y: -10, r: p.r, d: p.d, color: p.color};
}
else {
if (Math.sin(confetti.angle) > 0) {
confetti.particles[i] = {x: -5, y: Math.random() * H, r: p.r, d: p.d, color: p.color};
}
else {
confetti.particles[i] = {x: W + 5, y: Math.random() * H, r: p.r, d: p.d, color: p.color};
}
}
}
}
},
onCounterEnd: function () {
stopTimer();
myCounter.stop();
confetti.Stop();
}});
myCounter.start();
},
FadeOut:function fadeOut() {
var alpha = 1.0; // full opacity
for (var i = 0; i < confetti.particles.length; i++) {
var p = confetti.particles[i];
interval = setInterval(function () {
//confetti.canvas.width = confetti.canvas.width; // Clears the canvas
p.color = "rgba(255, 0, 0, " + alpha + ")";
alpha = alpha - 0.05; // decrease opacity (fade out)
if (alpha < 0) {
//confetti.canvas.width = confetti.canvas.width;
clearInterval(interval);
}
}, 50);
}
},
Counter: function Countdown(options) {
var timer,
instance = this,
seconds = options.seconds || 10,
updateStatus = options.onUpdateStatus || function () {
},
counterEnd = options.onCounterEnd || function () {
};
function decrementCounter() {
updateStatus(seconds);
if (seconds === 0) {
counterEnd();
instance.stop();
}
seconds--;
}
this.start = function () {
clearInterval(timer);
timer = 0;
seconds = options.seconds;
timer = setInterval(decrementCounter, options.speed);
};
this.stop = function () {
clearInterval(timer);
};
},
Stop: function stop() {
$('#confettiCanvasId').fadeOut();
setTimeout(function(){
var canvas = document.getElementById("confettiCanvasId");
if (canvas) {
canvas.parentNode.removeChild(canvas);
}
if (confetti.endFunction) {
confetti.endFunction();
}
},1000);
}
};
CSS:
.confettiCanvas{
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}

I think canvas-confetti is more realistic than any others here, and it has more feature: confetti, snow, fireworks, etc. Click here for demo!