Is it possible to draw a diagonal line in javascript?

I've seen a few examples that are hugely bloated and look like a bit of a nightmare for cross browser support.

Any help is appreciated.

    Better off using an image for that. Javascript can't "draw" anything that you couldn't put on the page in static HTML/CSS. The only thing it can do that they can't is add stuff dynamically, but it's bound by the same limitations as HTML/CSS because that's precisely what it manipulates.

      I had figured as much, but I was hoping for a blinding light of knowledge somebody was going to shine upon me 😛

      Anyway, I attached an image of what I am trying to create.

      The two boxes are of course DIV's and they are drag gable. When they drag I want the lines to be re-created.

      I guess that might be a bit too heavy duty to provide a 'ghosting' effect like you can with a dragging div. So I'll probably re-draw them on drop.

      For creating the images, would I use php and create a transparent image with a black line? Or is there a better solution than that?

      Thanks in advance 🙂

        Use an image. You'll sleep better. 😃

          I agree; while it is possible to pummel Javascript and CSS into giving you bordered <div> elements from which you can crop the corners - the code I've seen (example) has largely been "proof of concept" (and sometimes that seems more like a euphemism for the "how many people can we stuff into a phonebox" realm of usability: impressive, fun, but not something that would work as a daily way of life.)

          I'd stick with using an image. At least until IE catches up with Firefox's implementation of SVG.

            Write a Reply...