Open Bug 437297 Opened 17 years ago Updated 3 years ago

Allow using canvas reference as image in CSS

Categories

(Core :: CSS Parsing and Computation, defect, P3)

Product:
Core
Component:
CSS Parsing and Computation
Platform:
x86
All
Type:
defect

Tracking

()

People

(Reporter: vlad, Unassigned)

Details

It would be nice to be able to use a canvas wherever an image can be used in CSS, e.g.: background: url(#someCanvas); .. to give the author a way to draw into the element's background by drawing on a (potentially hidden) canvas.
url() resolves relative URLs relative to the style sheet. If you want a function for id-in-document, it should probably have a different name.
(In reply to comment #1) > url() resolves relative URLs relative to the style sheet. If you want a > function for id-in-document, it should probably have a different name. But it makes no sense for url(#id) to refer to the stylesheet itself, since the stylesheet is not a DOM document. So maybe that could be special-cased to refer to the styled document.
(In reply to comment #0) > It would be nice to be able to use a canvas wherever an image can be used in > CSS, e.g.: > > background: url(#someCanvas); > > .. to give the author a way to draw into the element's background by drawing on > a (potentially hidden) canvas. I actually plan to implement this for all elements. Combined with CSS transforms, that lets you do reflections, slide thumbnails, etc.
(In reply to comment #2) > But it makes no sense for url(#id) to refer to the stylesheet itself, since the > stylesheet is not a DOM document. So maybe that could be special-cased to refer > to the styled document. Is it that bad to call it id() instead, just so we can preserve the idea that url() is relative to the style sheet? Also, what if we want to later allow use of an element from a different document as a background? Then we'd want url() for that, I think.
(In reply to comment #4) > (In reply to comment #2) > > But it makes no sense for url(#id) to refer to the stylesheet itself, since > > the stylesheet is not a DOM document. So maybe that could be special-cased to > > refer to the styled document. > > Is it that bad to call it id() instead, just so we can preserve the idea that > url() is relative to the style sheet? No, that's fine. > Also, what if we want to later allow use of an element from a different > document as a background? Then we'd want url() for that, I think. That wouldn't conflict. I was just suggesting that url() containing only a hash could be special-cased. But I don't care, your id() is fine.
Ah, I wasn't sure if you were going to do it for everything. Canvas will need some special casing, though... you're not going to get notified that anything changed on the canvas unless you're watching for invalidates on its frame, and in some cases here it won't have an actual frame.
I am going to watch for invalidates on frames, that's the only way to make this work. In what cases would it not have an actual frame? I was not planning to make this work for display:none content; is that something you really want? Elements not in the document can't be referenced by ID, of course.
Adding this to the 1.9.1 triage queue by marking this wanted1.9.1?.
Flags: wanted1.9.1?
Priority: -- → P3
I have this implemented in my tree (for all elements, not just canvas). Currently the syntax is just url(#foo), so you'll have to use it from <style> or style="". I think the best way forward to use it for stylesheets would be to support external references and a DOM API for accessing the DOMs of those external resources.
Do we have a bug on said external references thing? It sounds like it should block a few separate bugs at this point... Also, I thought we were going to call this id(), right?
id() was going to allow stylesheets to refer to elements in the styled document. That might be useful but we don't need it immediately.
Ah, ok. I'd misunderstood what we were referencing.
Not sure if there's a good bug for external references. A search turns up bug 442559 but I'm not sure if there's a more canonical one.
Flags: wanted1.9.1? → wanted1.9.1+
Webkit calls this "CSS Canvas": CSS usage: background: -webkit-canvas(mycanvas); API: CanvasRenderingContext getCSSCanvasContext(in DOMString contextType, in DOMString identifier, in long width, in long height); article: http://webkit.org/blog/176/css-canvas-drawing/ testcase: http://trac.webkit.org/browser/trunk/LayoutTests/fast/canvas/canvas-bg.html?format=raw It works in the Safari 4 Public Beta.
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.