Re: [whatwg] Request: Canvas Tag CSS
Greg Houston wrote:
Having worked with the canvas tag quite a bit now, I've found that it
is a bit awkward that the canvas tag is not taking advantage of CSS.
If you are changing your site design, perhaps you want to change the
colors used in your line graphs as well. So you make the changes in
your CSS for the majority of your elements, which is rather painless,
and then for the canvas tag you then have to start digging through the
JavaScript to make your changes.
Say you are using the canvas tag to create buttons with a border and a
gradient. It would be nice to be able to change that gradient, and the
border size and color in the CSS. Maybe you are theming a site that is
using canvas elements. You are not comfortable with fooling with the
javascript, but if the basic shapes had CSS rules you might be a bit
more confident in making style changes.
What you want is called SVG.
Although there is some overlap, Canvas serves another purpose.
.myCanvas {
background-color: #fff;
width: 90px;
height: 30px;
}
.myButton {
fillStyle: rgba(0,255,0,1);
lineWidth: 1;
shadowColor: #000;
shadowBlur: 5;
}
.myGradient {
fillStyle: LinearGradient(0,0,0,30) ColorStop(0, '#00ABEB')
ColorStop(0.5, '#fff');
}
.myImage {
fillStyle: Pattern(/images/myimage.jpg) repeat;
}
ctx.fillStyle = 'css(myButton)';
ctx.strokeStyle = 'css(myButton)';
...
ctx.fillStyle = 'css(myGradient)';
Thanks for considering.
-Greg
--
Mathieu 'p01' HENRI
JavaScript developer, Opera Software ASA
Re: [whatwg] Some video questions
Martin, I'll be satisfied if someone tells me that video is not intended to be the preferred way to embed video on web pages, in which case I'll quietly return to my corner. I may be misinterpreting your tone, but from reading this discussion it seems that you're deliberately being difficult. You're quoting a two-month old email on a topic I'd resigned myself to, and I'm a bit reluctant to respond because any discussion about it seems to be perceived as difficult. That said... The Quicktime browser plugin is a video player. Great, this helps me understand your terminology. In my world the (for example) QuickTime plug-in is more just a shim, since the plug-in isn't playing the media but is instead instantiating QuickTime (the API) to play the media. I think we'd be in general agreement if we spent a few minute trading terminology. The HTML5 spec should ultimately require at least one video format that will be available in all compliant implementations. I understand, assuming that by video format you include an associated audio bitstream format and container format. It might be clearer for us to say linear media format. It's a nonsense to suggest that video could be player-agnostic, because video *is* a player. In my world, video is just an HTML element. It's by definition player-agnostic in the sense browsers will use different players (depending on what's available on the host OS) to play the media associated with a particular video element. And just to repeat the facts as I understand them: - video will universally support a base video/audio format (linear media format) defined by the final HTML 5 specification, assuming a suitable combination of container and bitstream formats can be found. - video will not universally support any other format. Is that correct? Thanks, -- Charles
Re: [whatwg] Request: Canvas Tag CSS
What if some script changes the rules?
Do you want the UA to infer the dependencies
and redraw the whole picture?
Canvas is an imperative element, and that is on purpose.
You want to mix a declarative mechanism in. That is bad style.
Chris
No. The UA would not redraw the canvas.
We have a CSS rule:
.myBox {
fill-style: rgba(255,0,0,1);
}
We have a function:
function drawBox() {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 0, 0);
ctx.fillStyle = css(myBox);
ctx.fillRect(0,0,25,25);
}
We run the function:
drawBox(); // Draws a red square.
...
Later the CSS rule is changed, either via the DOM or through the
addition of a new style sheet that trumps the first rule.
.myBox {
fill-style: rgba(0,255,0,1);
}
The next time the application runs drawBox(), this value is used and
the box is green.
Changing style values like this and then redrawing the canvas later is
common practice with Canvas animations. I don't see a problem. The
application might run .myBox 10ms later, 10 minutes later, or never,
but when it does it will look to the CSS for the fill-style.
-Greg
Re: [whatwg] Some video questions
On 07/04/2008, Charles [EMAIL PROTECTED] wrote: And just to repeat the facts as I understand them: - video will universally support a base video/audio format (linear media format) defined by the final HTML 5 specification, assuming a suitable combination of container and bitstream formats can be found. - video will not universally support any other format. Is that correct? As I understand it. Perhaps if someone writes a codec for H.120 ... - d.
Re: [whatwg] Request: Canvas Tag CSS
On Mon, Apr 7, 2008 at 9:08 PM, Greg Houston wrote:
What if some script changes the rules?
Do you want the UA to infer the dependencies
and redraw the whole picture?
Canvas is an imperative element, and that is on purpose.
You want to mix a declarative mechanism in. That is bad style.
Chris
No. The UA would not redraw the canvas.
We have a CSS rule:
.myBox {
fill-style: rgba(255,0,0,1);
}
We have a function:
function drawBox() {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 0, 0);
ctx.fillStyle = css(myBox);
ctx.fillRect(0,0,25,25);
}
We run the function:
drawBox(); // Draws a red square.
...
Later the CSS rule is changed, either via the DOM or through the
addition of a new style sheet that trumps the first rule.
.myBox {
fill-style: rgba(0,255,0,1);
}
The next time the application runs drawBox(), this value is used and
the box is green.
Your css() function could be written using the DOM-Level-2-Style, but
the easiest is to have elements with the styles you want and then use
getComputedStyle (as suggested by Anne)
script
var css = null;
if (getComputedStyle in window) {
css = function (id, prop) {
return window.getComputedStyle(document.getElementById(id))[prop];
}
} else {
// assume IE, with runtimeStyle
css = function(id, prop) {
return document.getElementById(id).runtimeStyle[prop];
}
}
/script
span id=myBoxStyleHolder class=myBox style=display:none/span
script
function drawBox() {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 0, 0);
ctx.fillStyle = css(myBoxStyleHolder, backgroundColor);
ctx.fillRect(0,0,25,25);
}
/script
Your problem here is that fill-style is not a CSS property...
--
Thomas Broyer
Re: [whatwg] Request: Canvas Tag CSS
On Mon, Apr 7, 2008 at 3:35 PM, Thomas Broyer [EMAIL PROTECTED] wrote:
Your css() function could be written using the DOM-Level-2-Style, but
the easiest is to have elements with the styles you want and then use
getComputedStyle (as suggested by Anne)
script
var css = null;
if (getComputedStyle in window) {
css = function (id, prop) {
return window.getComputedStyle(document.getElementById(id))[prop];
}
} else {
// assume IE, with runtimeStyle
css = function(id, prop) {
return document.getElementById(id).runtimeStyle[prop];
}
}
/script
span id=myBoxStyleHolder class=myBox style=display:none/span
script
function drawBox() {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 0, 0);
ctx.fillStyle = css(myBoxStyleHolder, backgroundColor);
ctx.fillRect(0,0,25,25);
}
/script
Your problem here is that fill-style is not a CSS property...
--
Thomas Broyer
Thomas,
Fill-style not being a CSS property may be a non-issue since as
Mathieu eluded, SVG has CSS Support, so many of the SVG CSS properties
might be used by Canvas.
Example SVG CSS properties:
http://developer.mozilla.org/en/docs/CSS:Getting_Started:SVG_graphics
stop-color
fill
stroke
stroke-width
Using getComputedStyle is not really an acceptable option. It's a hack
that would require polluting the DOM with elements that are being used
like some sort of proxy database.
Also, there is another way to get the CSS properties, though it seems
rather complex and funky; sorry for the non-technical term.
http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml
Imagine you had to use one of those two methods to style a paragraph.
It wouldn't be acceptable. It's way too complex.
Since SVG already has support for some of the basic CSS properties
that Canvas could use, it seems trivial to add UA support for
recognizing the following (with the quotes so it is not
mis-interpreted as a function):
ctx.fillStyle = 'css(myButton)';
ctx.lineWidth = 'css(myButton)';
If you want to make it easier on the UA, then it could use syntax
similar to your solution. Then the UA would not have to correlate
fill-style with fillStyle. The previous syntax is much nicer. The
following syntax is workable.
ctx.fillStyle = 'css(rule, property)';
ctx.lineWidth = 'css(rule, property)';
- Greg
