1

There are a lot of questions regarding drawing on the canvas element and using things like Raphael.js (which is pretty awesome), but I'd like to know if there is a way I can draw some vectors (mostly diagonal lines) above the DOM document rendered in a html doctype webpage.

I haven't done much with the canvas element but I think it might be possible to do something like this with perhaps:

  1. getting / monitoring the window size with javascript
  2. creating / resizing a canvas element that takes up the whole page
  3. somehow setting transparency on the canvas element
  4. drawing the vectors that I want

When you use a clear .gif you can't click on or interact with the things underneath it - I would like to still be able to interact with the webpage normally. I would also like scrolling to move up and down the page normally so the vectors would scroll with the DOM elements.

Am I heading in the right direction with this?

How can I draw vectors above the HTML / DOM in a standard webpage?

cwd
  • 53,018
  • 53
  • 161
  • 198
  • 3
    Doesn't Raphael.js use SVG not canvas? – M. Laing Oct 25 '12 at 03:06
  • Sorry, my apologies, I have not done much with either, although I tried Googling and searching on SO before posting. Just trying to get pointed in the right direction. – cwd Oct 25 '12 at 03:08
  • Yes Raphael.js is a wrapper around SVG and VML to draw vectors in a cross browser way. Plus some higher level functions to make drawing easier. – Matthew Lock Oct 25 '12 at 03:22

1 Answers1

2

Here's an example of Raphael.js drawing on top of text in a div http://raphaeljs.com/spin-spin-spin.html

Some more background on Raphael:

Raphael draws on an SVG canvas. If you give that a transparent background and position it over the window (z-index), then you can get the appearance you seek.

https://groups.google.com/forum/?fromgroups=#!topic/raphaeljs/SAPCl_UMNco

Matthew Lock
  • 13,144
  • 12
  • 92
  • 130
  • 1
    Good enough. This was more helpful - http://stackoverflow.com/questions/3407333/drawing-over-an-image-using-raphael-js/3463834#comment17744149_3463834 – cwd Oct 25 '12 at 13:45