Gothic pointed arch css or canvas - css

Question

i wonder if someone knows a source or a way to design a Gothic pointed arch with css or canvas.
Edit:
My attempt was to style the canvas quadraticCurveTo method to fit the gothic arc. But I failed badly and had not the guts to post it here :)
var canvas = document.getElementById('arch');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, -100, 388, 150);
context.lineWidth = 20
context.strokeStyle = 'black';
context.stroke();
http://jsfiddle.net/zumgugger/ZaqJ5/

Answer 1

Just because this is quirky and interesting....
Some geometry for a gothic pointed arch can be found here :
Perhaps the most recognizable feature of gothic architecture is the pointed arch. The basic gothic arch is equilateral in construction and forms the basis of many variants.
The construction of the equilateral arch is thus:
From the drawing, the compass is set to the span, a-b. With x-y as the springing line, the compass is positioned at the junction of a-x/y and a curve from x/y-q is draw as shown. The procedure is repeated with the compass placed at the junction of b-x/y, with the point at which the curves join forming the rise p-q. Drawing straight lines from a-x/y to q and b-x/y to q it can be shown that the resulting triangle is equilateral in construction with all angles being 60°.
http://www.stonecarvingcourses.com/the-geometry-of-gothic-architecture
I've put together a small fiddle that does this. http://jsfiddle.net/7c7Vc/1/
If my understanding is correct that means (and since I am not a mathematician I'll describe this in laymans terms) that you need to draw two arcs with the compass centered on points x and y respectively, from the opposite point on the x to y line to the intersect point q, given the distance between points x and y as the radius width for your compass.
In the example I use the arc method to do this, here is a sample that will draw the right hand side arc of the arch...
ctx.arc(0, archHeight, archWidth, 0, 1.5*Math.PI + _30degrees, true);
Explanation
We center the compass on point x :
ctx.arc(0, archHeight, archWidth, 0, 1.5*Math.PI + _30degrees, true);
-------------
Set the radius of our circle to be the width of the arch (the distance between point x and point y)
ctx.arc(0, archHeight, archWidth, 0, 1.5*Math.PI + _30degrees, true);
---------
Start drawing from the direction of 3'oclock (which happens to be 0 radians)
ctx.arc(0, archHeight, archWidth, 0, 1.5*Math.PI + _30degrees, true);
--
Draw the arc until we hit point q, which in terms of the arc we are drawing is 30 degrees short of the direction of 12'oclock (using local variable _30degrees which holds the equivalent value in radians) and radians : 1.5*Math.PI for the direction 12'oclock.
ctx.arc(0, archHeight, archWidth, 0, 1.5*Math.PI + _30degrees, true);
------------------------
And we want to draw this arc counter-clockwise
ctx.arc(0, archHeight, archWidth, 0, 1.5*Math.PI + _30degrees, true);
----
The reverse method is used for the other arc making up the arch, take a look at the example for this
Notes on the code:
It uses some patterns to set up a factory that will create your arch based on either height or width, the returned arch knows how to draw itself on a canvas and has been given it's calculated height and width by the factory. If you prefer not to use this pattern you can extract the calculation bits out and simplify it.